全选和反选操作是js中常见的操作,在许多网站常常可以见到。因此,掌握好全选和反选操作的代码书写十分重要。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>全选和反选</title>
<style>
*{
margin: 0;
padding: 0;
}
.wrap{
width: 300px;
margin: 100px auto 0;
}
table{
border-collapse:collapse;
border: 1px solid #c0c0c0;
border-spacing: 0;
width: 300px;
}
th,td{
border: 1px solid #d0d0d0;
color: #404060;
padding:10px;
}
th{
background-color: #0099cc;
font: bold 16px "微软雅黑";
color: #ffffff;
}
td{
font: 14px "微软雅黑";
}
tbody tr{
background-color: #f0f0f0;
}
tbody tr:hover{
cursor: pointer;
background-color: #fafafa;
}
</style>
</head>
<body>
<div class="wrap">
<table>
<thead>
<tr>
<th><input type="checkbox" id="j_cbAll"></th>
<th>商品</th>
<th>价格</th>
</tr>
</thead>
<tbody id="j_tb">
<tr>
<td><input type="checkbox"></td>
<td>iphone8</td>
<td>80000</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>ipad Pro</td>
<td>50000</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>ipad Air</td>
<td>20000</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>Apple watch</td>
<td>2000</td>
</tr>
</tbody>
</table>
<input type="button" value="反选" id="btn">
</div>
<script>
// 全选
//获取父的checkbox,注册点击事件
var j_cbAll=document.getElementById("j_cbAll");
var j_tb=document.getElementById("j_tb");
//将j_tb里面所有的input标签都找到
var inputs=j_tb.getElementsByTagName("input");
//找到所有子的checkbox,让这些checkbox的状态跟父checkbox的状态一致
j_cbAll.onclick=function () {
//如果是checkbox,设置状态与父状态一致
for(var i =0;i<inputs.length;i++){
var input=inputs[i];
if(input.type==="checkbox"){
input.checked=this.checked;
}
}
}
//全选问题:当子的checkbox全部被选中,那父的checkbox也要被选中。如果有一个子的checkbox没有被选中,那么父的checkbox也不被选中
//基本思路,每当点击了一个子的checkbox时,都要判断是否所有的checkbox都被选中了
//遍历所有的checkbox注册点击事件
for(var i = 0;i < inputs.length; i++) {
var input = inputs[i];
if (input.type != "checkbox") {
continue;
}
//判断是不是所有的checkbox都被选中,给子checkbox注册点击事件
input.onclick = function () {
checkAllCheckBox();
}
}
//判断父的checkbox的状态 封装成函数
//判断是不是所有的子的checkbox都被选中,所以又要循环找到所有的checkbox进行判断
function checkAllCheckBox() {
//假设所有的子的checkbox都被选中
var isAllChecked=true;
//判断是不是所有的子的checkbox都被选中,所以又要循环找到所有的checkbox进行判断
for(var j=0;j<inputs.length;j++){
var input=inputs[j];
if(input.type!="checkbox"){
continue;
}
//判断当前的checkbox是否都被选中
if(input.checked==false){
isAllChecked=false;
}
}
//设置父的checkbox的状态
j_cbAll.checked=isAllChecked;
}
//反选
//给反选按钮注册点击事件
var btn=document.getElementById("btn");
btn.onclick=function () {
//找到所有的子的checkbox,让其反选
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
if (input.type != 'checkbox') {
continue;
}
//反选
//子的checkbox
input.checked = !input.checked;
//反选完之后要判断:父的checkbox
checkAllCheckBox();
}
}
</script>
</body>
</html>