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

时间:2018-12-09
本文章向大家介绍jQuery实现全选、全不选以及反选操作,主要包括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"/>全选&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>