简单的jquery全选反选案例

本demo适合刚学习jQuery的战友学习。

一个星期平均有4次晚上是吃  某荔村肠粉，所以内容就是我晚上经常点吃的那些。一般我都是吃14块钱。

效果如图：

HTML代码：

 1 <ul id=‘food‘>
 2     <li><input type="checkbox" value=‘8‘>8元 红豆沙</li>
 3     <li><input type="checkbox" value=‘5‘>5元 青菜肠</li>
 4     <li><input type="checkbox" value=‘2‘>2元 加底</li>
 5     <li><input type="checkbox" value=‘7‘>7元 鸡蛋青菜粥</li>
 6     <li><input type="checkbox" value=‘6‘>6元 白灼鲜蔬菜</li>
 7     <li><input type="checkbox" value=‘7‘>7元 黄金南瓜粥</li>
 8     <li><input type="checkbox" value=‘3‘>3元 卤蛋</li>
 9 </ul>
10 <div>
11     <input type="checkbox" id=‘all‘>
12     <input type="button" value=‘全选‘ id=‘selectAll‘>
13     <input type="button" value=‘全不选‘ id=‘unselectAll‘>
14     <input type="button" value=‘反选‘ id=‘reverse‘>
15     <input type="button" value=‘获得选中的值‘ id=‘getnum‘>
16 </div>

JS代码：

 1 <script src=‘./js/jquery.min.js‘></script>
 2 <script>
 3     //计算次数，当 #food 7个都选中时，#all 也选中
 4     var num =0;
 5     //#all 全选框选中时，#food 全部选中
 6     $(‘#all‘).click(function(){
 7         if((this.checked)){
 8             $(‘#food :checkbox‘).prop(‘checked‘,true);
 9         }else{
10             $(‘#food :checkbox‘).prop(‘checked‘,false);
11         }
12     })
13     //全选按钮
14     $(‘#selectAll‘).click(function(){
15         $(‘:checkbox‘).prop(‘checked‘,true);
16         num = 7;
17     })
18     //全不选按钮
19     $(‘#unselectAll‘).click(function(){
20         $(‘:checkbox‘).prop(‘checked‘,false);
21         num = 0;
22     })
23     //反选按钮
24     $(‘#reverse‘).click(function(){
25         var arr = [];
26         $(‘#food :checkbox‘).each(function(){
27             $(this).prop(‘checked‘,!$(this).prop(‘checked‘));
28         })
29         $(‘#food>li>input‘).each(function(){
30             if(this.checked){
31                 arr.push($(this).val());
32             }
33         });
34         num = arr.length;
35         if(num == 7){
36             $(‘#all‘).prop(‘checked‘,true);
37         }else{
38             $(‘#all‘).prop(‘checked‘,false);
39         }
40     })
41     //获取价钱，显示出来
42     $(‘#getnum‘).click(function(){
43         getNum();
44     });
45     //全部#food框都选中时，#all 也选中
46     $(‘#food :checkbox‘).click(function(){
47         if(this.checked){
48             num++;
49         }else{
50             num--;
51         }
52         if(num == 7){
53             $(‘#all‘).prop(‘checked‘,true);
54         }else{
55             $(‘#all‘).prop(‘checked‘,false);
56         }
57     })
58     //计算价钱
59     function getNum(){
60         var sum = 0;
61         var arr = [];
62         $(‘#food>li>input‘).each(function(){
63             if(this.checked){
64                 //取value值，为字符串，转为数字
65                arr.push(Number($(this).val()));
66             }
67         });
68         //遍历数组，取合
69         arr.forEach(function(i){
70             sum += i;
71         })
72         alert("总共："+ sum + "元");
73     }
74
75 </script>