编写一个完整的表格列表内容中复选框的全选、反选效果
结果预览
代码展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
window.onload=function (){
var nums=document.getElementsByName("number");
var selall=document.getElementById("all");
var selnot=document.getElementById("not");
selall.onclick=function (){
for (var i=0;i<nums.length;i++){
nums[i].checked=selall.checked;
}
}
selnot.onclick=function (){
for(var i=0;i<nums.length;i++){
if (nums[i].checked==true){
nums[i].checked=false;
}else{
nums[i].checked=true;
}
}
}
for(var i=0;i<nums.length;i++){
nums[i].onclick=function (){
if(!this.checked){
selall.checked=false;
}
var count=0;
for(var i=0;i<nums.length;i++){
if(nums[i].checked==true){
count++;
}
}
if(count==10){
selall.checked=true;
}
}
}
}
</script>
</head>
<body>
<table border="1" id="select">
<tr bgcolor="#bdb76b">
<td > <input type="checkbox" id="all" >全选</input> </td>
<td width="400" align="center"> 复选框全选示例</td>
<td width="20"> </td>
<td width="20"> </td>
</tr>
<tr>
<td> <input type="checkbox" id="1" name="number" >1</input> </td>
<td> 作用：</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> <input type="checkbox" id="2" name="number" >2</input> </td>
<td> a.单击列头复选框全选或全部选子项</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> <input type="checkbox" id="3" name="number" >3</input> </td>
<td> b.只要有一个子项没有选中，则取消列头的选中状态</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> <input type="checkbox" id="4" name="number" >4</input> </td>
<td> c.当所有子项目选中时，列头复选框自动置为选中状态</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> <input type="checkbox" id="5" name="number" >5</input> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> <input type="checkbox" id="6" name="number" >6</input> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> <input type="checkbox" id="7" name="number" >7</input> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> <input type="checkbox" id="8" name="number" >8</input> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> <input type="checkbox" id="9" name="number" >9</input> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> <input type="checkbox" id="10" name="number" >10</input> </td>
<td> d.将复选框反过来选</td>
<td> </td>
<td> </td>
</tr>
<tr bgcolor="aqua">
<td> <input type="checkbox" id="not" >反选</input> </td>
<td align="center"> 反选示例</td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
