这是一个全选和取消全选的功能,最上边的是全选框,下边的是单选框。
1. 全选框选中,下边的所有单选框也都选中,全选框取消选中,下边的单选全不选中。如果全选选中情况下,下边的取消选中一个,哪上边的全选框就不选中。
2. 第二就是下边的单选框一个一个选中,等到下边的单选框全部选中后,上边的全选框选中。同样取消一个单选,全选就不选中。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.wrap{
border: 1px solid black;
width: 150px;
}
tr{
border: 1px solid black;
}
</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_tbs">
<tr>
<td>
<input type="checkbox">
</td>
<td>iPhone1</td>
<td>3000</td>
</tr>
<tr>
<td>
<input type="checkbox">
</td>
<td>iPhone2</td>
<td>4000</td>
</tr>
<tr>
<td>
<input type="checkbox">
</td>
<td>iPhone3</td>
<td>5000</td>
</tr>
</tbody>
</table>
</div>
<script>
// 全选和取消全选做法:让下面所以复选框的checked属性(选中状态)跟随全选按钮即可
var j_cbALL = document.getElementById('j_cbALL');
var j_tbs = document.getElementById('j_tbs').getElementsByTagName('input'); // 下面的所有复选框
j_cbALL.onclick = function(){
// this.checked 它可以得到当前复选框的选中状态 如果是true就是选中,如果是false就是未选中
for (var i = 0; i < j_tbs.length; i++){
j_tbs[i].checked = this.checked;
}
}
// 下面复选框需要全部选中,上面全选才能选中做法:给下面所以复选框绑定点击事件,
for(var i = 0; i < j_tbs.length; i++){
j_tbs[i].onclick = function(){
// flay 控制全选按钮是否选中
var flay = true;
// 每次点击下面的复选框都要循环检查所有按钮是否全被选中
for(var i = 0; i < j_tbs.length; i++){
if(!j_tbs[i].checked){
flay = false;
// 退出for循环,这样可以提高效率 因为只要有一个没选中,剩下的就不需要循环判断
break;
}
}
j_cbALL.checked = flay;
}
}
</script>
</body>
</html>