1.相信有很多朋友在学习前端原生JS的时候，都有遇到过实现全选按钮的需求吧。废话不多说直接上代码吧！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>
全选<input type="checkbox" class="main"><br>
1<input type="checkbox" name="1" id="a" >
2<input type="checkbox" name="2" id="a">
3<input type="checkbox" name="3" id="a">
4<input type="checkbox" name="4" id="a">
</div>
<script>
// 获取dom元素
let dom = document.querySelector(".main")
let inputs =document.querySelectorAll("#a")
//给所有小按钮循环绑定点击事件
for (let i = 0; i < inputs.length; i++) {
inputs[i].onclick = function () {
if(checks(Array.from(inputs))){
dom.checked = true
}else{
dom.checked = false
}
}
}
// 给全选按钮绑定点击事件
dom.onclick = function(){
dom.checked ? addCheck(true):addCheck(false)
}
//小按钮控制全选按钮
function checks(arr) {
let isChecked = arr.every((item)=>{
return item.checked == true
})
return isChecked
}
//全选控制其他的小按钮
function addCheck(params) {
Array.from(inputs).forEach(item => {
item.checked = params
});
}
</script>
</body>
</html>2.其实实现这个功能不难，我们需要有的是实现这个功能时候的编码思想。
