JavaScript实现全选和反选功能
在做表单时经常会需要实现复选框的全选和反选效果，今天利用JS写了一个相对简单的全选和反选功能。
1. 获取DOM节点
var checkBigBox = document.querySelector('.bigBox')
var tbs = document.getElementById('tbody').getElementsByTagName('input')
2. 实现全选和反选功能
// 全选和反选
checkBigBox.addEventListener('click', function () { //利用事件监听
for (var i = 0; i < tbs.length; i++) { //循环遍历tbody里面的复选框
tbs[i].checked = this.checked // 将每一个复选框的checked赋值全选框的checked 实现全选和反选
}
})
3. 实现下面复选框需要全部选中， 上面全选才能选中功能
for(var i=0;i<tbs.length;i++){
tbs[i].addEventListener('click',function(){
var flag = true //先定义flag为true
for(var j=0;j<tbs.length;j++){ //循环遍历每一个复选框
if(!tbs[j].checked){ //如果有一个复选框没有被选中则将flag设为false
flag = false
break; //退出for循环 这样可以提高执行效率 因为只要有一个没有选中，剩下的就无需循环判断了
}
}
checkBigBox.checked = flag //最后将flag的值赋值给全选框的checked
})
}
4. 整个HTML复制可以使用
<!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>
* {
padding: 0;
margin: 0;
}
.table {
width: 600px;
margin: 100px auto 0;
}
table {
/* 表格边框是否合并 */
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #c0c0c0;
width: 600px;
}
th,
td {
border: 1px solid #d0d0d0;
color: #404060;
padding: 10px;
}
th {
background-color: #973c3f;
font: bold 16px "微软雅黑";
color: #fff;
}
td {
font: 14px "微软雅黑";
}
tbody tr {
background-color: #f0f0f0;
}
tbody tr:hover {
cursor: pointer;
background-color: #fafafa;
}
</style>
<body>
<div class="table">
<table>
<thead>
<tr>
<th>
<input type="checkbox" class="bigBox" />
</th>
<th>课程</th>
<th>学分</th>
</tr>
</thead>
<tbody id="tbody">
<tr>
<td>
<input type="checkbox" />
</td>
<td>软件工程</td>
<td>4.0</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>JavaScript</td>
<td>4.0</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>Vue</td>
<td>4.0</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>Jquery</td>
<td>3.0</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>计算机网络</td>
<td>3.0</td>
</tr>
</tbody>
</table>
</div>
<script>
var checkBigBox = document.querySelector('.bigBox')
var tbs = document.getElementById('tbody').getElementsByTagName('input')
// 全选和反选
checkBigBox.addEventListener('click', function () { //利用事件监听
for (var i = 0; i < tbs.length; i++) { //循环遍历tbody里面的复选框
tbs[i].checked = this.checked // 将每一个复选框的checked赋值全选框的checked 实现全选和反选
}
})
// 下面复选框需要全部选中， 上面全选才能选中做法
for(var i=0;i<tbs.length;i++){
tbs[i].addEventListener('click',function(){
var flag = true //先定义flag为true
for(var j=0;j<tbs.length;j++){ //循环遍历每一个复选框
if(!tbs[j].checked){ //如果有一个复选框没有被选中则将flag设为false
flag = false
break; //退出for循环 这样可以提高执行效率 因为只要有一个没有选中，剩下的就无需循环判断了
}
}
checkBigBox.checked = flag //最后将flag的值赋值给全选框的checked
})
}
</script>
</body>
</html>
注意：checked是复选框原本属性
以上就是JS实现全选和反选的做法啦☆*: .｡. o(≧▽≦)o .｡.:*☆