全选和全不选(管理员列表)----html文件

代码功能:
对每个选项进行选择,如果中间四个全选则自动定义为全选,如果点击删除选定按钮,则会撤销全部选择。
界面:
在这里插入图片描述
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中了,都是可以运行的。

发布了9 篇原创文章 · 获赞 1 · 访问量 353

猜你喜欢

转载自blog.csdn.net/weixin_45266979/article/details/104639645
今日推荐