jQuery實現全選、全不選以及反選操作
摘要：
在寫購物車案例時實現全選操作使用的是js的getAttribute（）setAttribute（）方法獲取checked屬性的值是undefined實現完成之後全選操作，如果在全選中的情況下改變其中一個的狀態再點選全選，之前被取消的將不在被選中。之後使用js的DOM.checked屬相...
在寫購物車案例時實現全選操作使用的是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
50if($(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>
