jQuery实现全选、全不选以及反选操做

时间 2020-05-08

原文原文链接

　　在写购物车案例时实现全选操做使用的是js的getAttribute（）setAttribute（）方法获取checked属性的值是undefined实现完成以后全选操做，若是在全选中的状况下改变其中一个的状态再点击全选，以前被取消的将不在被选中。以后使用js的DOM.checked属相的得到是true或false，操做很方便，很完美没有bug。html

　　学了jquery后单独实现下全选、全不选、反选操做。jquery

　　代码，以下：ui


 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>Document</title>
 8 </head>
 9 <body>
10     <h3>个人爱好</h3>
11     <ul>
12         <li>
13             <input type="checkbox" class="sAll"/>全选&nbsp;<input type="checkbox" class="sNone"/>全不选&nbsp;
14             <input type="checkbox" class="Inverse"/>反选&nbsp;
15         </li>
16         <li><input type="checkbox" class="check"/>篮球</li>
17         <li><input type="checkbox" class="check"/>足球</li>
18         <li><input type="checkbox" class="check"/>排球</li>
19         <li><input type="checkbox" class="check"/>羽毛球</li>
20         <li><input type="checkbox" class="check"/>乒乓球</li>
21         
22     </ul>
23     <script src="jquery.js"></script>
24     <script>
25         /*全选*/
26         //1.拿到全选复选框的jquery对象调用change（），当前对象的状态改变时进行下面操做
27  $('.sAll').change(function () { 28             //2.拿到全部class属相值为check的对象，将其checked属性值设置为true。
29  $('.check').attr('checked',true); 30 
31             //点击全选，全不选、反选其中一个时其它两的选中状态清除
32  $('.sNone').attr('checked',false); 33  $('.Inverse').attr('checked',false); 34  }); 35         //alert($('.sAll').attr('checked'));
36         /*全不选*/
37  $('.sNone').change(function () { 38  $('.check').attr('checked',false); 39             
40             //点击全选，全不选、反选其中一个时其它两的选中状态清除
41  $('.sAll').attr('checked',false); 42  $('.Inverse').attr('checked',false); 43  }); 44         /*反选*/
45         //注意：attr()方法取第一个的值 ，赋值所用
46  $('.Inverse').change(function () { 47             //遍历全部要操做的复选框
48  $('.check').each(function () { 49                 //若是该复选框的checked属性为true，则改成false，反之为true
50                 if($(this).attr('checked')){ 51  $(this).attr('checked',false); 52  }else{ 53  $(this).attr('checked',true); 54  } 55                
56  }); 57             //将全选和全不选的状态去掉（点击全选，全不选、反选其中一个时其它两的选中状态清除）
58  $('.sAll').attr('checked',false); 59  $('.sNone').attr('checked',false); 60  }); 61     </script>
62 </body>
63 </html>