全选与全部选

下面的代码是关于全选与全部选的案例:仅供参考

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<table border="1">
<thead id="th">
<tr>
<th><input type="checkbox" id="ckall"></th>
<th>姓名</th>
<th>籍贯</th>
</tr>
</thead>
<tbody id="tb">
<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>
</table>
<script>
var ckall = document.getElementById('ckall');

var cks = document.getElementById('tb').getElementsByTagName('input');

ckall.onclick = function(){
for(var i = 0;i < cks.length; i++){
cks[i].checked = this.checked;
}
}

for(var i=0;i<cks.length;i++){
cks[i].onclick = function(){
var flag = true;
for(var j=0;j<cks.length;j++){
if(!cks[j].checked){
flag = false;
break;
}
}
ckall.checked = flag;
}
}
</script>
</body>
</html>

猜你喜欢

转载自www.cnblogs.com/rockychen/p/9947555.html