使用Html+Css+js技术编写一个完整的表格列表内容中 复选框的全选、反选效果,效果如下所示:
代码实现:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>复选框</title>
<style>
<!--使用CSS设置表格底色-->
#color1{background-color:#ffff00;}
#color2{background-color:#33ffff;}
</style>
<script >
function quanxuan(){//全选事件
for(var i=1;i<=10;i++){
var cbox_id="cb"+i;
var cbox=document.getElementById(cbox_id);
if(document.getElementById("all").checked){//如果勾选全选
cbox.checked=true;//则1~10全都勾选
}else{
cbox.checked=false;
}
}
}
function fanxuan(){//反选事件
for(var i=1;i<=10;i++){
var cbox_id="cb"+i;
var cbox=document.getElementById(cbox_id);
if(document.getElementById("creverse").checked){//选中反选框
if(cbox.checked){//如果1~10中有选框被选中,则取消勾选
cbox.checked=false;
}else{
cbox.checked=true;//剩下未被勾选的则被勾选上
}
}else{//如果取消反选框的勾选
if(cbox.checked){
cbox.checked=false;//则1~10已经被选中的取消选中状态
}else{
cbox.checked=true;//未被选中的变为选中
}
}
}
}
</script>
</head>
<body>
<form id="form1">
<table border="1" width="50%" align="center">
<tr id="color1">
<td><input type="checkbox" id="all" onclick="quanxuan()">全选</td>
<td align="center">复选框全选示例</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td><input type="checkbox" id="cb1">1</td>
<td>作用:</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td><input type="checkbox" id="cb2">2</td>
<td>a.单击列头复选框全选或全不选子项</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td><input type="checkbox" id="cb3">3</td>
<td>b.只要有一个子项没有选中,则取消列头的选中状态</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td><input type="checkbox" id="cb4">4</td>
<td>c.当所有子项目选中时,列头复选框自动置为选中状态</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td><input type="checkbox" id="cb5">5</td>
<td></td>
<td> </td>
<td> </td>
</tr>
<tr>
<td><input type="checkbox" id="cb6">6</td>
<td></td>
<td> </td>
<td> </td>
</tr>
<tr>
<td><input type="checkbox" id="cb7">7</td>
<td></td>
<td> </td>
<td> </td>
</tr>
<tr>
<td><input type="checkbox" id="cb8">8</td>
<td></td>
<td> </td>
<td> </td>
</tr>
<tr>
<td><input type="checkbox" id="cb9">9</td>
<td></td>
<td> </td>
<td> </td>
</tr>
<tr>
<td><input type="checkbox" id="cb10">10</td>
<td>d.将复选框反过来选</td>
<td> </td>
<td> </td>
</tr>
<tr id="color2">
<td><input type="checkbox" id="creverse" onclick="fanxuan()">反选</td>
<td align="center">反选示例</td>
<td> </td>
<td> </td>
</tr>
</table>
</form>
</body>
</html>
显示效果: