<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
li {
list-style: none;
}
#box1 {
width: 500px;
margin: 20px 0 0 10px;
}
#box1 h1 {
font-size: 35px;
}
#box1 input,
#box2 input,
#box3 input,
#box4 input {
margin: 5px 8px 5px 5px;
}
#box2,
#box3,
#box4 {
margin: 20px 0 0 50px;
}
#box2 h2,
#box3 h2,
#box4 h2 {
font-size: 25px;
margin-top: 20px;
}
#box2 ul,
#box3 ul,
#box4 ul {
margin-top: 15px;
}
#box2 ul li,
#box3 ul li,
#box4 ul li {
font-size: 17px;
}
</style>
<body>
<div id="box1">
<h1><input id="quanXuan" type="checkbox" />全选</h1>
</div>
<div id="wrap">
<div id="box2">
<h2><input class="input" id="haiEr" type="checkbox" />海尔</h2>
<ul class="first">
<li><input type="checkbox" data-id="0" />空调</li>
<li><input type="checkbox" data-id="0" />电视</li>
<li><input type="checkbox" data-id="0" />洗衣机</li>
<li><input type="checkbox" data-id="0" />冰箱</li>
</ul>
</div>
<div id="box3">
<h2><input class="input" id="huaWei" type="checkbox" />华为</h2>
<ul class="second">
<li><input type="checkbox" data-id="1" />空调</li>
<li><input type="checkbox" data-id="1" />电视</li>
<li><input type="checkbox" data-id="1" />洗衣机</li>
<li><input type="checkbox" data-id="1" />冰箱</li>
</ul>
</div>
<div id="box4">
<h2><input class="input" id="meiDi" type="checkbox" />美的</h2>
<ul class="third">
<li><input type="checkbox" data-id="2" />空调</li>
<li><input type="checkbox" data-id="2" />电视</li>
<li><input type="checkbox" data-id="2" />洗衣机</li>
<li><input type="checkbox" data-id="2" />冰箱</li>
</ul>
</div>
</div>
<script>
var allcheck = document.querySelector("#quanXuan");//全选
var singlechecks = document.querySelectorAll(".input");//单个全选框
var inputs = document.querySelectorAll("input");//所有选择框
var checks = document.querySelectorAll("#wrap input");
var uls = document.querySelectorAll('ul')
var lis = document.querySelectorAll("li");
// 全选 全不选
allcheck.addEventListener("click", function () {
inputs.forEach((v) => {
v.checked = this.checked;
});
});
// 单个
singlechecks.forEach((v, i) => {
v.addEventListener("click", function () {
var childs = uls[i].children
Array.from(childs).forEach((v) => {
v.children[0].checked = this.checked
var checkedInputs = document.querySelectorAll("#wrap input:checked");//所有选中的选择框
allcheck.checked = checkedInputs.length === checks.length
})
});
});
lis.forEach(v => {
v.addEventListener('click',function(){
// console.log(v.parentElement.querySelectorAll('input'));
var all = v.parentElement.previousElementSibling.children[0]
// console.log(all);
var singles = v.parentElement.querySelectorAll('input')
var singleChecks = v.parentElement.querySelectorAll('input:checked')
all.checked = singleChecks.length === singles.length
var checkedInputs = document.querySelectorAll("#wrap input:checked");//所有选中的选择框
allcheck.checked = checkedInputs.length === checks.length
})
})
</script>
</body>
<ml>
全选全不选js代码实现
最新推荐文章于 2022-12-13 22:34:38 发布