一个星期平均有4次晚上是吃 某荔村肠粉，所以内容就是我晚上经常点吃的那些。一般我都是吃14块钱。
效果如图：
html代码：
1 <ul id='food'> 2
8元 红豆沙
5元 青菜肠
2元 加底 7元 鸡蛋青菜粥
6元 白灼鲜蔬菜 7元 黄金南瓜粥
3元 卤蛋
<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 }) $('#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 { num--;51 }52 if(num == 7){53 $('#all').prop('checked',true);54 }else{55 $('#all').prop('checked',false);56 } })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 } });68 //遍历数组，取合69 arr.foreach(function(i){70 sum += i;71 })72 alert(总共：+ sum + 元);73 } </script>
以上就是分享jquery全选反选实例的详细内容。