【JS实现】表单全选和取消全选
效果
技术点
没什么技术点,主要看思想
全选
分析业务逻辑
1. 点击全选按钮的时候
=> 如果全选按钮是选中, 那么每一个选项按钮也选中
=> 如果全选按钮是未选中, 那么每一个选项按钮都是未选中
2. 每一个选项按钮点击的时候
=> 如果所有的选项按钮都是选中, 那么全选按钮选中
=> 只要有任意一个选项按钮未选中, 那么全选按钮未选中
代码:
1. 获取元素
=> 全选按钮
=> 所有的选项按钮
2. 给全选按钮添加一个点击事件
=> 获取全选按钮的选中状态
=> 使用 checked 原生属性
=> 循环遍历 itemBtns, 给里面的每一个 input 设置 checked 属性
=> 我自己是什么就给他们设置成什么
3. 给 itemBtns 里面的每一个添加一个点击事件
=> 每一个按钮的点击, 都需要判断是不是所有的按钮都是选中
=> 遍历 itemBtns 判断里面每一个是不是都是选中状态
-> 做一个假设变量, 假设所有的都是选中
-> 循环遍历
-> 只要有任何一个是未选中的, 那么把我的假设否定掉
-> 结束循环
=> 根据我判断的 flag 的值给 全选按钮设置选中状态
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 160px;
padding: 5px;
border: 1px solid #333;
margin: 100px auto;
}
.box>div {
padding: 15px;
}
</style>
</head>
<body>
<div class="box">
<div class="all">
全选: <input type="checkbox">
</div>
<hr>
<div class="items">
选项一: <input type="checkbox"> <br>
选项二: <input type="checkbox"> <br>
选项三: <input type="checkbox"> <br>
选项四: <input type="checkbox"> <br>
</div>
</div>
<script>
/*
全选
分析业务逻辑
1. 点击全选按钮的时候
=> 如果全选按钮是选中, 那么每一个选项按钮也选中
=> 如果全选按钮是未选中, 那么每一个选项按钮都是未选中
2. 每一个选项按钮点击的时候
=> 如果所有的选项按钮都是选中, 那么全选按钮选中
=> 只要有任意一个选项按钮未选中, 那么全选按钮未选中
代码:
1. 获取元素
=> 全选按钮
=> 所有的选项按钮
2. 给全选按钮添加一个点击事件
=> 获取全选按钮的选中状态
=> 使用 checked 原生属性
=> 循环遍历 itemBtns, 给里面的每一个 input 设置 checked 属性
=> 我自己是什么就给他们设置成什么
3. 给 itemBtns 里面的每一个添加一个点击事件
=> 每一个按钮的点击, 都需要判断是不是所有的按钮都是选中
=> 遍历 itemBtns 判断里面每一个是不是都是选中状态
-> 做一个假设变量, 假设所有的都是选中
-> 循环遍历
-> 只要有任何一个是未选中的, 那么把我的假设否定掉
-> 结束循环
=> 根据我判断的 flag 的值给 全选按钮设置选中状态
*/
// // 1. 获取元素
// var allBtn = document.querySelector('.all > input')
// // querySelectorAll 方法获取的元素集合可以使用 forEach
// var itemBtns = document.querySelectorAll('.items > input')
// // 2. 给全选按钮添加点击事件
// allBtn.onclick = function () {
// // 2-2. 获取自己的状态
// var type = allBtn.checked
// // 2-3. 循环遍历 itemBtns 给他们设置
// // for (var i = 0; i < itemBtns.length; i++) {
// // itemBtns[i].checked = type
// // }
// itemBtns.forEach(function (item) { item.checked = type })
// }
// // 3. 给 每一个选项 按钮添加点击事件
// itemBtns.forEach(function (item) {
// // 添加点击事件
// item.onclick = function () {
// // 3-2. 判断是不是每一个都是选中的
// var flag = true
// itemBtns.forEach(function (item) {
// if (!item.checked) flag = false
// })
// // 3-3. 给全选按钮设置选中状态
// // flag === true, 表示全都选中, 全选按钮选中
// // flag === false, 表示没有全都选中, 全选按钮未选中
// allBtn.checked = flag
// }
// })
</script>
</body>
</html>
<!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>
<style>
table {
margin: 0 auto;
}
thead {
background-color: blue;
}
</style>
</head>
<body>
<table border="1px" cellpadding="10px" cellspacing="0" width="400px">
<thead>
<tr>
<td><input type="checkbox" id="tbox"></td>
<td>商品</td>
<td>价钱</td>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox"></td>
<td>iPhone8</td>
<td>8000</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>iPad Pro</td>
<td>5000</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>Ipad Ari</td>
<td>2000</td>
</tr>
</tbody>
</table>
<script>
var tbox = document.querySelector('#tbox');
var bobox =document.querySelector('tbody').querySelectorAll('input');
tbox.addEventListener('click', function() {
for (var i = 0; i < bobox.length; i++) {
// 这时把全选按钮的状态给子按钮
bobox[i].checked = this.checked;
}
})
// 给下面全部复选框绑定点击事件
for (var i = 0; i < bobox.length; i++) {
bobox[i].addEventListener('click', function() {
// flag控制全选按钮是否选中
var flag = true;
// 每次点击下面的复选框都要循环检查下面的复选框是否全被选中
for (var i = 0; i < bobox.length; i++) {
if (!bobox[i].checked) {
flag = false;
break;//退出for循环,提高执行效率,只要有一个没被选中,剩下的就无需判断了
}
}
tbox.checked = flag;
})
}
</script>
</body>
</html>
本站部分文章资源来源于互联网,仅供学习交流,如若要商用,请购买正版!
若不听劝告,网友造成出现一切后果,与本站本人无关
本站有些资源未经测试,请注意网络安全,本站不对下载的资源造成的后果负责
免责声明
作者:昼白
转载请注明来源:https://www.2bcnm.com/3254.htm
若不听劝告,网友造成出现一切后果,与本站本人无关
本站有些资源未经测试,请注意网络安全,本站不对下载的资源造成的后果负责
免责声明
作者:昼白
转载请注明来源:https://www.2bcnm.com/3254.htm
THE END
1
二维码
打赏
海报


【JS实现】表单全选和取消全选
效果
技术点
没什么技术点,主要看思想
全选
分析业务逻辑
1. 点击全选按钮的时候
=> 如果全选按钮是选中, 那么每一个选项按钮……

文章目录
关闭
昼白
昼白
昼白
昼白