JavaScript案例（二）：全选；html+css+js实现全选功能
代码逻辑∶
1、给全选按钮绑定点击事件
拿到自己的选中状态；给所有选项按钮设置选中状态
2、给每一个选项按钮绑定点击事件
判断是不是所有选项按钮都是选中的；根据判断结果给全选按钮设置选中状态
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>案例-2：全选</title>
<style>
* {
margin: 0;
padding: 0;
}
.box{
width: 100px;
padding: 20px;
border: 1px solid #545bb6;
margin: 30px auto;
border-radius: 5px;
}
hr{
margin: 10px 0;
}
</style>
</head>
<body>
<div class="box">
全选：<input type="checkbox"><br>
<hr>
<input type="checkbox">选项一<br>
<input type="checkbox">选项二<br>
<input type="checkbox">选项三<br>
<input type="checkbox">选项四<br>
</div>
<script>
//1.获取元素
var allBtn = document.querySelector('input')
var items = document.querySelectorAll('input:nth-child(n + 2)')
console.log(allBtn)
console.log(items)
//2.给全选按钮绑定事件
allBtn.onclick = function () {
//2-1:拿到自己的选中状态
var type = allBtn.checked
console.log(type)
//2-2:把自己的选中状态设置给每一个选项按钮
for(var i = 0;i < items.length; i++){
items[i].checked = type
}
}
//3. 循环给每一个选项按钮绑定点击事件
for(var i = 0; i < items.length; i++){
//3-1:给每一个选项按钮绑定点击事件
items[i].onclick = function () {
//3-1-1: 首先定义假设变量，假设所有按钮都是选中的
var flag = true
//3-1-2: 通过循环来验证我们的假设
for(var j = 0; j < items.length; j++){
if(items[j].checked === false){
flag = false
break
}
}
//3-1-3:把我们得到的结果设置给全选按钮
allBtn.checked = flag
}
}
//
</script>
</body>
</html>文章参考视频：b站千锋前端学习营：千锋前端JavaScript全套教程_JS零基础完美入门到项目实战https://www.bilibili.com/video/BV1W54y1J7Ed?share_source=copy_web
投递快手等公司7个岗位 >
