(day03-2)DOM：按钮的全选和取消全选

最新推荐文章于 2024-10-28 18:25:21 发布

原创最新推荐文章于 2024-10-28 18:25:21 发布 · 237 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#dom #选择器

DOM 专栏收录该内容

15 篇文章

订阅专栏

博客涉及DOM和选择器相关信息技术内容，但具体内容缺失。推测围绕DOM选择器的使用、特性等方面展开。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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"/>全选</th>
			<th>管理员ID</th>
			<th>姓名</th>
			<th>操作</th>
		</tr>
	  </thead>
	  <tbody>
	  	<tr>
	  		<td><input type="checkbox"/></td>
	  		<td>1</td>
	  		<td>Tester</td>
	  		<td>修改 删除</td>
	  	</tr>
	  	<tr>
	  		<td><input type="checkbox"/></td>
	  		<td>2</td>
	  		<td>Manager</td>
	  		<td>修改 删除</td>
	  	</tr>
	  	<tr>
	  		<td><input type="checkbox"/></td>
	  		<td>3</td>
	  		<td>Analyst</td>
	  		<td>修改 删除</td>
	  	</tr>
	  	<tr>
	  		<td><input type="checkbox"/></td>
	  		<td>4</td>
	  		<td>Admin</td>
	  		<td>修改 删除</td>
	  	</tr>
	  </tbody>
	</table>
	<button>删除选定</button>
  <script>
//匿名函数自调——避免全局污染  chbAll和chbs   会自动形成闭包（变量不会释放，可以重复使用）
	(function(){
	//1、查找 触发事件的元素   table—— thead—— tr—— 第一个th—— input
		var chball=document.querySelector("table>thead>tr>th:first-child>input");//选择器查找
		var chbs=document.querySelectorAll("table>tbody>tr>td:first-child>input");
	//2、绑定 触发事件函数
		chball.onclick=function(){//不用this。chball只有一个
		//3、查找要修改的元素 chbs 前面找过不用再找了，直接使用
		//4、修改元素
		for(var chb of chbs){
			//遍历每个chb的 状态，选中或是没选===chball
			chb.checked=chball.checked;
			}
		}

		//以上实现功能：点击全选下面的选项框也全部选中，或取消
		//以下要实现的功能：
		//1、下面四个选项框有一个没选中，全选就不会选中
		//2、下面四个选项框全部选中，全选也选中


	//1、查找 触发事件的元素。上面找过就不用再找了
	//2、绑定 触发事件函数
		//有多个选项框：遍历
		for(var chb of chbs){
		//每遍历一个chb，就绑定单击事件函数
		chb.onclick=function(){
			var chb=this;//有多个chb，指定当前元素
		//3、查找要修改的元素 chbAll  同上找过了直接用
		//4、修改元素：
		//若当前有任何一个chb未选中，那chball一定不选中
		if(chb.checked==false){
			chball.checked=false;
		}else{//否则
		//chb全部选中=chnall全选。换个角度：
		//若没找到未选中的，那就是全部选中了
			//先找到tbody中tr下第一个td中未选中的input。前面找到的是选中的input，不能直接用。
			var unchecked=document.querySelector("tbody>tr>td:first-child>input:not(:checked)");//否定伪类选择器
			if(unchecked==null)
				chball.checked=true;
			}
		}
	}
	})()
	</script>
</body>
</html>

在这里插入图片描述