代码功能:
对每个选项进行选择,如果中间四个全选则自动定义为全选,如果点击删除选定按钮,则会撤销全部选择。
界面:
HTML代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>选择:全选、全不选</title>
</head>
<body>
<h2>管理员列表</h2>
<table border="1px"width="500px">
<thead>
<tr>
<th><input type="checkbox" name="adminAll"onclick="checkAll(this)"/>全选</th>
<th>管理员ID</th>
<th>姓名</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="adminID"onclick="checkSel(this)"/></td>
<td>1</td>
<td>Tester</td>
<td>修改 删除</td>
</tr>
<tr>
<td><input type="checkbox"name="adminID"onclick="checkSel(this)" /></td>
<td>2</td>
<td>Manager</td>
<td>修改 删除</td>
</tr>
<tr>
<td><input type="checkbox" name="adminID"onclick="checkSel(this)"/></td>
<td>3</td>
<td>Analyst</td>
<td>修改 删除</td>
</tr>
<tr>
<td><input type="checkbox" name="adminID"onclick="checkSel(this)"/></td>
<td>4</td>
<td>Admin</td>
<td>修改 删除</td>
</tr>
</tbody>
<tfoot>
<tr>
<th><input type="checkbox" name="adminAll"onclick="checkAll(this)"/>全选</th>
<th>管理员ID</th>
<th>姓名</th>
<th>操作</th>
</tr>
</tfoot>
</table>
<button onclick="deleteCheck()">删除选定</button>
<script>
//全选处理
function checkAll(chb){
//根据全选的值修改所有的复选框
var chbs=document.getElementsByName("adminID");
for(var i=0;i<chbs.length;i++){
chbs[i].checked=chb.checked;
}
//同步上下两个全选
var chbAll=document.getElementsByName("adminAll");
for(var i=0;i<chbAll.length;i++){
chbAll[i].checked=chb.checked;
}
}
//处理某一个复选框
function checkSel(chb){
var chbAll=document.getElementsByName("adminAll");
//查找没有选中的数量
var unchb=document.querySelectorAll("table>tbody td:first-child>input:not(:checked)");
if(unchb.length==0){//空集合时false,说明返回空集合说明都被选中
for(var i=0;i<chbAll.length;i++){
chbAll[i].checked=true;
}
}else{
for(var i=0;i<chbAll.length;i++){
chbAll[i].checked=false;
}
}
//!!!此处多了一个},故多次,运行不报错,但结果出错
}
//全不选
function deleteCheck(){
var chbs=document.getElementsByName("adminID");
for(var i=0;i<chbs.length;i++){
chbs[i].checked=false;
}
var chbAll=document.getElementsByName("adminAll");
for(var i=0;i<chbAll.length;i++){
chbAll[i].checked=false;
}
}
</script>
</body>
</html>
JavaScript代码可以自行创建一个文件,我创建在html中了,都是可以运行的。