上篇写到利用js实现该功能,这次利用jQuery可以更简单的实现该功能
在项目里需要添加jquery.js如图:
网页中body代码
<body>
您的爱好很广泛!!!
<br>
<input type="checkbox" name="chekcItems" value="全选/全不选" id="select"/>全选/全不选
<br>
<input type="checkbox" name="items" value="足球" />足球
<input type="checkbox" name="items" value="篮球" />篮球
<input type="checkbox" name="items" value="游泳" />游泳
<input type="checkbox" name="items" value="唱歌" />唱歌
<br>
<input type="button" name="checkall" id="checkall" value="全选" />
<input type="button" name="checkall" id="checknotall" value="全不选" />
<input type="button" name="checkall" id="checkreverse" value="反选" />
</body>
js中代码,注意要引用jquery.js的地址
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(function() {//页面加载完执行该代码
//找到全选/全不选框并添加点击事件
$("input[name='chekcItems']").click(function() {
$("input[name='items']").prop("checked",this.checked);//找到复选框添加属性checked并赋值
});
//找到每一个复选框并添加点击事件
$("input[name='items']").click(function() {
if($("input[name='items']:checked").length==$("input[name='items']").length){//被选中复选框的个数等于复选框的总个数
$("input[name='chekcItems']").prop("checked",true);//为全选/全不选复选框添加属性checked并赋值true
}else{
$("input[name='chekcItems']").prop("checked",false);//否则赋值false
}
});
//找到全选按钮并添加点击事件
$("#checkall").click(function() {
$("input[name='items']").prop("checked",true);
$("input[name='chekcItems']").prop("checked",true);
});
//找到全不选按钮并添加点击事件
$("#checknotall").click(function() {
$("input[name='items']").prop("checked",false);
$("input[name='chekcItems']").prop("checked",false);
});
//找到反选按钮并添加点击事件
$("#checkreverse").click(function() {
$("input[name='items']").each(function(i,n) {
$(n).prop("checked",!this.checked);//循环复选框进行反选操作
})
if($("input[name='items']:checked").length==$("input[name='items']").length){//判断是否勾选全选/全不选框
$("input[name='chekcItems']").prop("checked",true);
}else{
$("input[name='chekcItems']").prop("checked",false);
}
});
})
</script>