本demo适合刚学习jquery的战友学习。
一个星期平均有4次晚上是吃 某荔村肠粉，所以内容就是我晚上经常点吃的那些。一般我都是吃14块钱。
效果如图：
HTML代码：
<span style="color: #008080"> 1</span> <span style="color: #0000ff"><</span><span style="color: #800000">ul </span><span style="color: #ff0000">id</span><span style="color: #0000ff">='food'</span><span style="color: #0000ff">></span><span style="color: #008080"> 2</span>
8元 红豆沙
5元 青菜肠
2元 加底 7元 鸡蛋青菜粥
6元 白灼鲜蔬菜 7元 黄金南瓜粥
3元 卤蛋
<br/><span style="color: #0000ff"><</span><span style="color: #800000">input </span><span style="color: #ff0000">type</span><span style="color: #0000ff">="button"</span><span style="color: #ff0000"> value</span><span style="color: #0000ff">='全选' </span><span style="color: #ff0000">id</span><span style="color: #0000ff">='selectAll'</span><span style="color: #0000ff">></span><span style="color: #008080">13</span> <span style="color: #0000ff"><</span><span style="color: #800000">input </span><span style="color: #ff0000">type</span><span style="color: #0000ff">="button"</span><span style="color: #ff0000"> value</span><span style="color: #0000ff">='全不选' </span><span style="color: #ff0000">id</span><span style="color: #0000ff">='unselectAll'</span><span style="color: #0000ff">></span><span style="color: #008080">14</span>
<br/><span style="color: #0000ff"><</span><span style="color: #800000">input </span><span style="color: #ff0000">type</span><span style="color: #0000ff">="button"</span><span style="color: #ff0000"> value</span><span style="color: #0000ff">='反选' </span><span style="color: #ff0000">id</span><span style="color: #0000ff">='reverse'</span><span style="color: #0000ff">></span><span style="color: #008080">15</span> <span style="color: #0000ff"><</span><span style="color: #800000">input </span><span style="color: #ff0000">type</span><span style="color: #0000ff">="button"</span><span style="color: #ff0000"> value</span><span style="color: #0000ff">='获得选中的值' </span><span style="color: #ff0000">id</span><span style="color: #0000ff">='getnum'</span><span style="color: #0000ff">></span><span style="color: #008080">16</span> <span style="color: #0000ff"></</span><span style="color: #800000">div</span><span style="color: #0000ff">><br/><br/><br/></span>
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全选反选实例的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
183
收藏
