JSP
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <link rel="stylesheet" type="text/css" media="screen" href="css/practices.css" /> <script src="js/jquery.js" type="text/javascript"></script> <script src="js/practices.js" type="text/javascript"></script> </head> <body> <div class="divFrame2"> <div class="divTitle2"> 请输入如下信息</div> <div class="divContent2"> 姓名：<input id="Text1" type="text" class="txtCss"/><br /> 性别：<input id="Radio1" name="rdoSex" type="radio" value=" 男" /> 男 <input id="Radio2" name="rdoSex" type="radio" value=" 女" /> 女<br /> 婚否：<input id="Checkbox1" name="marry" type="checkbox" /> <br/><br/><br/>爱好：<br/> 乒乓球：<input id="Checkbox2" name="hobby" type="checkbox" value="乒乓球" /><br/> 台 球：<input id="Checkbox3" name="hobby" type="checkbox" value="台球" /><br/> 篮 球：<input id="Checkbox4" name="hobby" type="checkbox" value="篮球" /><br/> 足 球：<input id="Checkbox5" name="hobby" type="checkbox" value="足球" /><br/> 游 泳：<input id="Checkbox6" name="hobby" type="checkbox" value="游泳" /><br/> <a id="selectAll">全选</a> <a id="disAll">取消</a><br> <br/><br/><br/>来自何方：<br/> <select name="where"> <option value="hk">Hong Kong</option> <option value="tw" selected>Taiwan</option> <option value="cn">China</option> <option value="us">United States</option> <option value="ca">Canada</option> </select> <div class="divBtn"> <input id="Button1" type="button" value=" 提交" class="btnCss" /> </div> </div> </div> <div id="divTip" class="divTip"></div> </body> </html>
JS
$(document).ready(function() { // do something here $(".divTitle").click(function(){ //next(selected)函数:找到后面紧邻的同辈元素中类名为selected的元素。 $(this).addClass("divCurrColor1") .next(".divContent1").css("display","block"); }); $("#selectAll").click(function (){ $("input[@name='hobby']").attr("checked",true); }); $("#disAll").click(function (){ $("input[@name='hobby']").attr("checked",false); }); $("#Button1").click(function(){ // 获取文本框的值 var oTxtValue=$("#Text1").val(); // 获取单选框按钮值 //用一个表达式来检查当前选择的元素集合，如果其中至少有一个元素符合这个给定的表达式就返回true。 var oRdoValue=$("#Radio1").is(":checked") ? " 男":" 女"; //下面的这个alert是尝试用其他办法获得单选框的值 //得到单选框的选中项的值(注意中间没有空格) alert($("input[@type=radio][@checked]").val()); // 获取复选框按钮值 var oChkValue=$("#Checkbox1").attr("checked") ? " 已婚":" 未婚"; var hobby=""; $("input[@name=hobby][@checked]").each(function(){ hobby=hobby+$(this).val()+" "; }); //下面的这几个alert是尝试用不同的办法获得checkbox是否被选中 alert($("#Checkbox1").is(":checked") ? " 已婚":" 未婚"); alert($("#Checkbox1").attr("checked")+" 2"); alert($("input[@id='Checkbox1']").attr("checked")+" 3"); alert($("input[@name='Checkbox1']").is(":checked")+" 4"); var hefang=""; //得到下拉菜单的选中项的值 // hefang=$("select[@name=where] option[@selected]").val(); //得到下拉菜单的选中项的文本(注意中间有空格) //表示具有name 属性，并且该属性值为’country’ 的select元素里面的具有selected 属性的option 元素。 //可以看出有@开头的就表示后面跟的是属性。 hefang=$("select[@name=where] option[@selected]").text(); // 显示提示文本元素 $("#divTip").css("display","block"); // 设置文本元素的内容 $("#divTip").html(oTxtValue+"<br>"+oRdoValue+"<br>"+oChkValue+"<br>"+hobby+"<br>"+hefang); }); });
CSS
.divFrame2{ width:260px; border:solid 1px #666; font-size:10pt } .divTitle2{ background-color:#eee; padding:5px } .divContent2{ padding:8px; font-size:9pt } .divTip{ width:244px; border:solid 1px #666; padding:8px;font-size:9pt; margin-top:5px;display:none } .txtCss{ border:solid 1px #ccc } .divBtn{ padding-top:5px } .divBtn .btnCss{ border:solid 1px #535353; width:60px }