1 <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> 2 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 3 <html> 4 <head> 5 <!-- jQuery表单对象属性过滤选择器 --> 6 <!-- 7 :enabled 选取所有可用元素 集合元素 $("#form1 :enabled") 选取id为form1的表单内的所有可用元素 8 :disabled 选取所有不可用元素 集合元素 $("#from2 :disabled") 选取id为form2的表单内的所有不可用元素 9 :checked 选取所有被选中的元素（单元框、复选框） 集合元素 $("input:checked") 选取所有被选中的input元素 10 :selected 选取所有被选中的选项元素（下拉列表） 集合元素 $("select option:selected") 选取所有被选中的选项元素 11 --> 12 <meta http-equiv="pragma" content="no-cache"> 13 <meta http-equiv="cache-control" content="no-cache"> 14 <meta http-equiv="expires" content="0"> 15 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 16 <meta http-equiv="description" content="This is my page"> 17 <script type="text/javascript" src="../../js/jquery.js"></script> 18 <script type="text/javascript" > 19 //改变表单内可用文本框的值 20 function test1(){ 21 $("#form1 input:enabled").val("这里变化了"); 22 } 23 24 //改变表单内不可用文本框的值 25 function test2(){ 26 $("#form1 input:disabled").val("这里变化了"); 27 } 28 29 //获取多选框的选中个数 30 function test3(){ 31 var l = $("input:checked").length; 32 $("#checkeds").text("选中了"+l+"条"); 33 } 34 35 //获取下拉框选中的内容 36 function test4(){ 37 var content = $("select :selected").text(); 38 $("#selecteds").text(content); 39 } 40 </script> 41 </head> 42 <body> 43 <div align="center"> 44 <form action="#" id="form1" > 45 可用元素：<input name="add" value="可用文本框" /><br/> 46 不可用元素：<input name="email" disabled="disabled" value="不可用元素" /> <br/> 47 可用元素：<input name="che" value="可用文本框"/> <br/> 48 不可用元素：<input name="name" disabled="disabled" value="不可用文本框"/> <br/> 49 <br/> 50 51 多选框：<br/> 52 <input type="checkbox" name="newsletter" checked="checked" value="test1"/>test1 53 <input type="checkbox" name="newsletter" value="test2"/>test2 54 <input type="checkbox" name="newsletter" value="test3"/>test3 55 <input type="checkbox" name="newsletter" checked="checked" value="test4"/>test4 56 <input type="checkbox" name="newsletter" value="test5"/>test5 57 <div id="checkeds"></div> 58 <br/><br/> 59 60 下拉列表1：<br/> 61 <select name="test" multiple="multiple" style="height:100px;"> 62 <option>浙江</option> 63 <option selected="selected">湖南</option> 64 <option>北京</option> 65 <option selected="selected">天津</option> 66 <option>广州</option> 67 <option>湖北</option> 68 </select> 69 70 <br/><br/> 71 下拉列表2：<br> 72 <select name="test2"> 73 <option>浙江</option> 74 <option>湖南</option> 75 <option selected="selected">北京</option> 76 <option>天津</option> 77 <option>广州</option> 78 <option>湖北</option> 79 </select> 80 81 <div id="selecteds"></div> 82 <br/><br/> 83 84 <input type="button" onclick="test1()" value="改变表单内可用input元素的值" /> 85 <input type="button" onclick="test2()" value="改变表单内不可用input元素的值" /> 86 <input type="button" onclick="test3()" value="获取多选框选中的个数" /> 87 <input type="button" onclick="test4()" value="获取下拉框选中的内容" /> 88 89 </form> 90 </div> 91 92 </body> 93 </html>