<html>
<head>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script type="text/javascript">
$(function(){
$("#checkAll").click(function(){ //全选
$(":checkbox").prop("checked",true);
})
$("#checkNo").click(function(){ //全不选
$(":checkbox").prop("checked",false);
})
$("#checkrev").click(function(){
$(":checkbox[name='item']").each(function(){ //获取全部的选项 each() 方法规定为每个匹配元素规定运行的函数。提示：返回 false 可用于及早停止循环。
this.checked=!this.checked;
//each遍历的函数中，this对象为当前正在遍历的对象
})
var a=$(":checkbox[name='item']").length; //判定是否满选
var b=$(":checkbox[name='item']:checked").length;
if(a==b){
$("#checkedAllBox").prop("checked",true);
}else{$("#checkedAllBox").prop("checked",false);}
})
$(":checkbox[name='item']").click(function(){ //在选择选项时判定是否满选
var a=$(":checkbox[name='item']").length;
var b=$(":checkbox[name='item']:checked").length;
$("#checkedAllBox").prop("checked",a==b);
})
})
</script>
</head>
<body>
<input type="checkbox" name="item">python
<input type="checkbox" name="item">c
<input type="checkbox" name="item">java
<input type="checkbox" id="checkedAllBox">全选/全不选
<p></p>
<button id="checkAll">全选</button>
<button id="checkNo">全不选</button>
<button id="checkrev">反选</button>
</body>
</html>
运行结果如下：
