jQuery全選、全不選、逆選

18868 ワード

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <script src="../js/jquery1.8.3.min.js"></script>    
 6         <title>    -checkbox</title>
 7         <style>
 8             *{margin:10px}
 9         </style>
10     </head>
11     <body>
12         <form method="post" action="">
13 14             <br/>
15             <input type="checkbox" name="items" value="  " id="zq"/><label   for="zq">    </label>
16             <input type="checkbox" name="items" value="  " id="lq"/><label   for="lq">    </label> 
17             <input type="checkbox" name="items" value="   " id="ymq"/><label for="ymq">   </label>    
18             <input type="checkbox" name="items" value="   " id="ppq"/><label for="ppq">   </label> 
19             <br/>
20             <input type="button" id="CheckedAll" value="   "/>
21             <input type="button" id="CheckedNo" value="   "/>
22             <input type="button" id="CheckedRev" value="   "/> 
23         
24             <input type="button" id="send" value="   "/> 
25         </form>
26         <script>
27             $(function(){
28                 //  
29                 $("#CheckedAll").click(function(){
30                     $("input[name=items]").attr("checked",true);
31                 });
32                 //   
33                 $("#CheckedNo").click(function(){
34                     $("input[name=items]").attr("checked",false);
35                 });
36                 
37                 //  
38                 $("#CheckedRev").click(function(){
39                     //checkbox
40                     var checkElem = $("input[name=items]");
41                     /**   :
42                     for(var i = 0; i<checkElem.length;i++){
43                         checkElem[i].checked = !checkElem[i].checked;
44                     }
45                     **/
46                     //
47                     checkElem.each(function(){
48                         this.checked = !this.checked;
49                     });
50                     /**   :
51                     checkElem.each(function(){
52                         if($(this).attr("checked")){
53                             $(this).attr("checked",false);
54                         }else{
55                             $(this).attr("checked",true);
56                         }
57                     });
58                     **/
59                 });
60             })
61         </script>
62     </body>
63 </html>