首页 > 程序开发 > web前端 > HTML/CSS >

使用html+css+js技术编写一个完整的表格列表内容中复选框的全选反选效果

2017-08-21

使用html+css+js技术编写一个完整的表格列表内容中复选框的全选反选效果

使用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>&nbsp;&nbsp;</td>
<td>&nbsp;&nbsp;</td>
</tr>
<tr>
<td><input type="checkbox" name="box" />1</td>
<td>作用:</td>
<td>&nbsp;&nbsp;</td>
<td>&nbsp;&nbsp;</td>
</tr>
<tr>
<td><input type="checkbox" name="box" />2</td>
<td>a.单机列头复选框全选或全不选</td>
<td>&nbsp;&nbsp;</td>
<td>&nbsp;&nbsp;</td>
</tr>
<tr>
<td><input type="checkbox" name="box" />3</td>
<td>c.当所有子项目选中时,列头复选框自动设置为选中状态</td>
<td>&nbsp;&nbsp;</td>
<td>&nbsp;&nbsp;</td>
</tr>
<tr>
<td><input type="checkbox" name="box" />4</td>
<td>d.将复选框反过来选</td>
<td>&nbsp;&nbsp;</td>
<td>&nbsp;&nbsp;</td>
</tr>
<tr>
<td><input type="checkbox" id="creverse" onclick="reverse()" />反选</td>
<td>反选实例</td>
<td>&nbsp;&nbsp;</td>
<td>&nbsp;&nbsp;</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>

相关文章
最新文章
热点推荐