论如何通过JS实现全选单选反选功能
今天是来高博学习的第42天。
需求如下。
话不多说，直接上代码。
<!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>
.checkall {
margin: 0 auto;
}
#btn {
display: block;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="main">
<table class="checkall" border="1" cellspacing="0">
<thead>
<tr>
<td>
<input type="checkbox" id="intocheckall">全选
</td>
<td>
你好
</td>
<td>
我好
</td>
</tr>
<tbody id="tb_check">
<tr>
<td><input type="checkbox"></td>
<td>
你好
</td>
<td>
我好
</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>
你好
</td>
<td>
我好
</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>
你好
</td>
<td>
我好
</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>
你好
</td>
<td>
我好
</td>
</tr>
</tbody>
</thead>
</table>
<input type="button" id="btn" value="反选">
</div>
<script>
//咱们来实现一个点击全选的效果
var checkall = document.querySelectorAll('#tb_check input[type=checkbox]');
var intocheckall = document.getElementById('intocheckall');
intocheckall.onclick = function () {
var i = 0;
var len = checkall.length;
for (; i < len; i++) {
var check = checkall[i];
check.checked = this.checked;
}
}
//接下来咱们来实现一个点击全部子的checkbox选中全选。有一个未点则取消全选。
var len = checkall.length;
for (var i = 0; i < len; i++) {
var check = checkall[i];
check.onclick = function () {
singleChecked();
}
}
//在外面定义一个函数。有一个子的checkbox没有选中，全选也不选中。
function singleChecked() {
var isAllchecked = true;
for (i = 0; i < len; i++) {
check = checkall[i];
//循环遍历子checkbox
if (!check.checked) {
isAllchecked = false;
break;
}
}
intocheckall.checked = isAllchecked;
}
//接下来咱们来实现一个反选的功能。即点击 反选 按钮。改变原本的子checkbox的选中状态即可。
var btn = document.getElementById('btn');
btn.onclick = function () {
for (var i = 0; i < len; i++) {
var check = checkall[i];
// if(check.checked){
// check.checked=false;
// }
// else{
// check.checked=true;
// }
//此上又为本人的愚笨的方法
check.checked = !check.checked;
}
singleChecked();
}
</script>
</body>
</html>
