使用html+css+js技术编写一个完整的表格列表内容中复选框的全选反选效果
<!DOCTYPE html>
<html>
<!--
描述：使用html+css+js技术编写一个完整的表格列表内容中 复选框的全选 反选效果
-->
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<table border="1">
<tr>
<td><input type="checkbox" id="ckall" onclick="checkall()" />全选</td>
<td>复选框全选实例</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td><input type="checkbox" name="box" />1</td>
<td>作用：</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td><input type="checkbox" name="box" />2</td>
<td>a.单机列头复选框全选或全不选</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td><input type="checkbox" name="box" />3</td>
<td>c.当所有子项目选中时，列头复选框自动设置为选中状态</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td><input type="checkbox" name="box" />4</td>
<td>d.将复选框反过来选</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td><input type="checkbox" id="creverse" onclick="reverse()" />反选</td>
<td>反选实例</td>
<td> </td>
<td> </td>
</tr>
</table>
<script>
function checkall(){
var flag=document.getElementById("ckall").checked;
var ho=document.getElementsByName("box");
for(var i=0;i<ho.length;i++){
ho[i].checked=flag;
}
}
function reverse(){
var ho=document.getElementsByName("box");
for(var i=0;i<ho.length;i++){
ho[i].checked=!ho[i].checked;
}
}
</script>
</body>
</html>
