效果
代码展示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 引用jQuery文件 -->
<script src="js/jquery-3.6.0.js"></script>
</head>
<body>
<div>
<input type="checkbox" class="qx">全选
</div>
<div>
<input type="checkbox" class="active">吃饭
<input type="checkbox" class="active">睡觉
<input type="checkbox" class="active">打豆豆
</div>
<script>
// 进入入口
$(function() {
// 全选
$(".qx").click(function() {
// 把全选的状态赋值给status
var status = this.checked;
$(".active").each(function() {
// 同步各个选框与全选的状态一致
this.checked = status;
})
})
// 反选
$(".active").click(function(){
// 获取选中的所有元素
var ch = $(".active:checked");
// 判断选中的元素个数是否等于所有的个数
if(ch.length==$(".active").length){
$(".qx").prop("checked",true);
}else{
$(".qx").prop("checked",false);
}
})
})
</script>
</body>
</html>
jquery文件下载地址
选择这个：下载未压缩的、开发的jQuery 3.6.1