事件说明:
自己动手写了个js,运行,控制台报错:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>全选</title>
<script>
var cbAll = document.getElementById("cbAll");
var tbs = document.getElementById("tb").getElementsByTagName("input");
cbAll.onclick=function(){
console.log(cbAll.checked);
for(var i = 0;i < tbs.length;i++){
tbs[i].checked=cbAll.checked;
}
}
for (var i = 0;i < tbs.length;i++){
tbs[i].onclick=function(){
var flag=true;
for (var i = 0;i < tbs.length;i++){
if(!tbs[i].checked){
flag = false;
}
}
cbAll.checked=flag;
}
}
</script>
</head>
<body>
<table class="box">
<thead>
<tr>
<th><input type="checkbox" id="cbAll" ></th>
<th>价格</th>
<th>商品</th>
</tr>
</thead>
<tbody id="tb">
<tr>
<td>
<input type="checkbox">
</td>
<td>
30
</td>
<td>
荔枝
</td>
</tr>
<tr>
<td>
<input type="checkbox">
</td>
<td>
29
</td>
<td>
哈密瓜
</td>
</tr>
<tr>
<td>
<input type="checkbox">
</td>
<td>
28
</td>
<td>
苹果
</td>
</tr>
</tbody>
</table>
</body>
</html>
查了一下,很多网友说是因为导航栏部分没有设置id导致。
后来发现是script放在了head中,如果没有设置window.onload,那么JS在html加载之前就会被解析,相应的就取不到html中的元素了。所以把js相关代码放到相关html后面就好了。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>全选</title>
</head>
<body>
<table class="box">
<thead>
<tr>
<th><input type="checkbox" id="cbAll" ></th>
<th>价格</th>
<th>商品</th>
</tr>
</thead>
<tbody id="tb">
<tr>
<td>
<input type="checkbox">
</td>
<td>
30
</td>
<td>
荔枝
</td>
</tr>
<tr>
<td>
<input type="checkbox">
</td>
<td>
29
</td>
<td>
哈密瓜
</td>
</tr>
<tr>
<td>
<input type="checkbox">
</td>
<td>
28
</td>
<td>
苹果
</td>
</tr>
</tbody>
</table>
<script>
var cbAll = document.getElementById("cbAll");
var tbs = document.getElementById("tb").getElementsByTagName("input");
cbAll.onclick=function(){
console.log(cbAll.checked);
for(var i = 0;i < tbs.length;i++){
tbs[i].checked=cbAll.checked;
}
}
for (var i = 0;i < tbs.length;i++){
tbs[i].onclick=function(){
var flag=true;
for (var i = 0;i < tbs.length;i++){
if(!tbs[i].checked){
flag = false;
}
}
cbAll.checked=flag;
}
}
</script>
</body>
</html>
也可以不改顺序,通过设置window.onload 来运行。设置window.onload 的作用是:使js代码在确保页面加载完成后再进行
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>全选</title>
<script>
window.onload=function(){
var cbAll = document.getElementById("cbAll");
var tbs = document.getElementById("tb").getElementsByTagName("input");
cbAll.onclick=function(){
console.log(cbAll.checked);
for(var i = 0;i < tbs.length;i++){
tbs[i].checked=cbAll.checked;
}
}
for (var i = 0;i < tbs.length;i++){
tbs[i].onclick=function(){
var flag=true;
for (var i = 0;i < tbs.length;i++){
if(!tbs[i].checked){
flag = false;
}
}
cbAll.checked=flag;
}
}
}
</script>
</head>
<body>
<table class="box">
<thead>
<tr>
<th><input type="checkbox" id="cbAll" ></th>
<th>价格</th>
<th>商品</th>
</tr>
</thead>
<tbody id="tb">
<tr>
<td>
<input type="checkbox">
</td>
<td>
30
</td>
<td>
荔枝
</td>
</tr>
<tr>
<td>
<input type="checkbox">
</td>
<td>
29
</td>
<td>
哈密瓜
</td>
</tr>
<tr>
<td>
<input type="checkbox">
</td>
<td>
28
</td>
<td>
苹果
</td>
</tr>
</tbody>
</table>
</body>
</html>