jQuery實現全選、全不選以及反選操作
阿新 • • 發佈：2018-12-09
在寫購物車案例時實現全選操作使用的是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>
