<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>控制DOM对象</title> <style type="text/css" > @import url(../../CSS/1-3.css); /*使用import 方法引用CSS*/ </style> <script type="text/javascript" src="../../JQuery/jquery-2.1.4.min.js"> </script> <script type="text/javascript"> $(function () { $("#Button1").click(function () { //获取文本框的值 var oTxtValue = $("#Text1").val(); //获取单选按钮的值 var oRdoValue = $("#Radio1").is(":checked") ? "男" : "女"; //获取复选框按钮只 var oChkValue = $("#Checkbox1").is(":checked") ? "已婚" : "未婚"; //显示提示文本元素和内容 $("#divTip").css("display", "block").html(oTxtValue + "<br>" + oRdoValue + "<br>" + oChkValue); }) }) </script> </head> <body> <div class="divFrame"> <div class="divTitle">请输入如下信息</div> <div class="divContent"> 姓名：<input id="Text1" type="text" class="txtCss"/><br /> 性别：<input id="Radio1" name="rdoSex" type="radio" value="男" /> 男 <input id="Radio2" name="rdoSex" type="radio" value="女" /> 女 婚否: <input id="Checkbox1" type="checkbox" /> <div class="divBth"> <input id="Button1" type="button" value="提交"/> </div> <div id="divTip" class="divTip"></div> </div> </div> </body> </html>