jQuery实现全选、全不选以及反选操作
程序员文章站
2022-06-11 11:34:45
在写购物车案例时实现全选操作使用的是js的getAttribute（）setAttribute（）方法获取checked属性的值是undefined实现完成之后全选操作，如果在全选中的情况下改变其中一个的状态再点击全选，之前被取消的将不在被选中。之后使用js的DOM.checked属相的获得是tru ......
在写购物车案例时实现全选操作使用的是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>