<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
thead {
background-color: #555555;
color: green
}
tbody {
background-color: #7cd1f9;
color: blue;
height: 50px
}
tfoot {
background-color: #888888;
color: red
}
.bg{
background-color: pink;
}
</style>
</head>
<body>
<table border="1">
<thead>
<tr>
<th>
<input type="checkbox" id="j_cbAll" />
</th>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tbody id="j_tb">
<tr>
<td>
<input type="checkbox" />
</td>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>February</td>
<td>$80</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
</table>
<script>
var j_cbALl=document.getElementById('j_cbAll'); //上面复选框
var j_tb=document.getElementById('j_tb').getElementsByTagName('input'); //下面复选框
j_cbALl.onclick=function () {
for (var i=0;i<j_tb.length;i++){
j_tb[i].checked=this.checked;
}
}
for (var i=0;i<j_tb.length;i++){
j_tb[i].onclick=function () {
var flag=true;
for (var j=0;j<j_tb.length;j++){
if (j_tb[j].checked==false){
flag=false;
console.log(flag);
}
}
if (flag){
console.log(typeof j_cbALl.checked);
j_cbALl.checked=true;
}else {
j_cbALl.checked=false;
}
}
}
</script>
</body>
</html>
js实现全选反选表单
最新推荐文章于 2024-04-02 19:39:43 发布