jQuery实现全选、全不选以及反选操作
在写购物车案例时实现全选操作使用的是js的getAttribute（）setAttribute（）方法获取checked属性的值是undefined实现完成之后全选操作，如果在全选中的情况下改变其中一个的状态再点击全选，之前被取消的将不在被选中。之后使用js的DOM.checked属相的获得是true或false，操作很方便，很完美没有bug。
学了jquery后单独实现下全选、全不选、反选操作。
代码，如下：
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"/>全选 <input type="checkbox" class="sNone"/>全不选 14 <input type="checkbox" class="Inverse"/>反选 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>
