<!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>fn——check</title>
</head>
<body>
<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>8000</td>
</tr>
<tr>
<td>
<input type="checkbox">
</td>
<td>iphone8</td>
<td>8000</td>
</tr>
<tr>
<td>
<input type="checkbox">
</td>
<td>iphone8</td>
<td>8000</td>
</tr>
<tr>
<td>
<input type="checkbox">
</td>
<td>iphone8</td>
<td>8000</td>
</tr>
</tbody>
</table>
<button id="btn">反选</button>
</body>
</html>
<script>
function my$(id){
return document.getElementById(id)
}
var j_cbAll=my$('j_cbAll');
var checkboxs=document.querySelectorAll('#j_tb input[type=checkbox]');
j_cbAll.onclick=function(){
//1.2让所有子的checkbox的选中状态和父的checkbox的状态保持一致
//1.2.1获取所有子checkbox
var i=0,len=checkboxs.length;
for(;i<len;i++){
//获取每一个checkbox
var checkbox=checkboxs[i];
//让每一个checkbox的选中状态和父的checkbox的状态一致
checkbox.checked=this.checked;
}
}
var i=0,len=checkboxs.length;
for(;i<len;i++){
var checkbox=checkboxs[i];
//注册点击事件
checkbox.onclick=function(){
singleChecked();
}
}
function singleChecked(){
//如果有一个子checkbox没有选中,父的checkbox也不选中
//假设所有子的checkbox都选中了
var isAllChecked=true;
for(i=0;i<len;i++){
//获取每一个子checkbox
checkbox=checkboxs[i];
//判断选中状态
if(!checkbox.checked){
//如果checkbox没有选中
isAllChecked=false;
break;
}
}
//设置父的checkbox的选中状态
j_cbAll.checked=isAllChecked;
}
//反选
my$('btn').onclick=function(){
//遍历所有子checkbox,对其选中状态取反
for(var i=0;i<len;i++){
var checkbox=checkboxs[i];
//反选
checkbox.checked=!checkbox.checked;
}
//如果有一个子的checkbox没有选中,父的checkbox也不选中
singleChecked();
}
</script>
javascript实现全选反选功能
最新推荐文章于 2020-12-18 13:16:34 发布