码迷,mamicode.com
首页 > Web开发 > 详细

jQuery全选、全不选、反选

时间:2016-01-29 20:41:18      阅读:160      评论:0      收藏:0      [点我收藏+]

标签:

 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>

 

jQuery全选、全不选、反选

标签:

原文地址:http://www.cnblogs.com/goldWen90/p/5169603.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!