【代码片段】jQuery测试表单过滤选择器 

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>第2章示例9</title>
 6 <style type="text/css">
 7     body { width:760px; }                                                                
 8     label,textarea,select { display:block; }
 9      textarea { width:560px; }
10     div button { font:bold 16px/1 Arial,Helvetica,sans-serif; margin:1px 3px; padding:2px 0; cursor:pointer; width:165px; }
11 </style>
12 <script src="http://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>
13 <script type="text/javascript">
14     $(document).ready(function(){
15         $("#btn1").click(function(){alert("可用的option元素有："+$("option:enabled").length+"个");});    
16         $("#btn2").click(function(){alert("不可用的option元素有："+$("option:disabled").length+"个");});
17         $("#btn3").click(function(){alert("被选中的input元素有："+$("input:checked").length+"个");});
18         $("#btn4").click(function(){alert("被选中的option元素有："+$(":selected").length+"个");});                                    
19     });
20 </script>
21 </head>
22 <body>
23     <form id="test">
24     &lt;form id="test"&gt;<br/>
25         <input type="hidden"/>
26         <label><input type="text"/>&lt;input type="text"/&gt;</label>
27         <label><input type="password"/>&lt;input type="password"/&gt;</label>
28         <label><input type="file"/>&lt;input type="file"/&gt;</label>    
29         <label><input type="image"/>&lt;input type="image"/&gt;</label>    
30         <label><input type="radio" value="radio1" checked="checked"/>&lt;input type="radio" value="radio1" checked="checked"/&gt;</label>
31         <label><input type="radio" value="radio2"/>&lt;input type="radio" value="radio2"/&gt;</label>
32         <label><input type="radio" value="radio3"/>&lt;input type="radio" value="radio3"/&gt;</label>
33         <label><input type="radio" value="radio4" disabled="disabled"/>&lt;input type="radio" value="radio4" disabled="disabled"/&gt;</label>
34         <label><input type="checkbox" value="checkbox1" checked="checked"/>&lt;input type="checkbox" value="checkbox1" checked="checked"/&gt;</label>
35         <label><input type="checkbox" value="checkbox2" checked="checked"/>&lt;input type="checkbox" value="checkbox2" checked="checked"/&gt;</label>
36         <label><input type="checkbox" value="checkbox3"/>&lt;input type="checkbox" value="checkbox3"/&gt;</label>
37         <label><input type="checkbox" value="checkbox4" disabled="disabled"/>&lt;input type="checkbox" value="checkbox4" disabled="disabled"/&gt;</label>
38         <textarea disabled="disabled">&lt;textarea disabled="disabled"&gt;&lt;/textarea&gt;</textarea>
39         &lt;select&gt;<br/>
40         <select>        
41             <option value="option1" selected="selected">&lt;option value="option1" selected="selected"&gt;&lt;/option&gt;</option>
42             <option value="option2">&lt;option value="option2" selected="selected"&gt;&lt;/option&gt;</option>
43             <option value="option3">&lt;option value="option3" selected="selected"&gt;&lt;/option&gt;</option>
44             <option value="option4" disabled="disabled">&lt;option value="option4" selected="selected"&gt;&lt;/option&gt;</option>    
45         </select>
46         &lt;/select&gt;    <br/>
47         &lt;select multiple="multiple"&gt;<br/>    
48         <select multiple="multiple">        
49             <option value="option1" selected="selected">&lt;option value="option1" selected="selected"&gt;&lt;/option&gt;</option>
50             <option value="option2" selected="selected">&lt;option value="option2" selected="selected"&gt;&lt;/option&gt;</option>
51             <option value="option3">&lt;option value="option3" selected="selected"&gt;&lt;/option&gt;</option>
52             <option value="option4" disabled="disabled">&lt;option value="option4" selected="selected"&gt;&lt;/option&gt;</option>        
53         </select>
54         &lt;/select&gt;    <br/>
55         <input type="button" value="&lt;input type=&quot;button&quot; value=&quot;**&quot;/&gt;"/><br />
56         <input type="reset" value="&lt;input type=&quot;reset&quot; value=&quot;**&quot;/&gt;"/><br />
57         <input type="submit" disabled="disabled" value="&lt;input type=&quot;submit&quot; value=&quot;**&quot; disabled=&quot;disabled&quot;/&gt;"/><br />
58         <button type="button">&lt;button type="button"&gt;&lt;/button&gt;</button><br />    
59         <button type="reset">&lt;button type="reset"&gt;&lt;/button&gt;</button><br />
60         <button type="submit" disabled="disabled">&lt;button type="submit" disabled="disabled"&gt;&lt;/button&gt;</button><br/>
61     &lt;/form&gt;
62     </form>
63     <div>
64         <button type="button" id="btn1">$("option:enabled")</button>
65         <button type="button" id="btn2">$("option:disabled")</button>
66         <button type="button" id="btn3">$("input:checked")</button>
67         <button type="button" id="btn4">$(":selected")</button>
68     </div>
69 </body>
70 </html>

posted @ 2013-03-05 18:57  KOJYA  阅读(228)  评论(0)  编辑  收藏  举报