有关document的组合查找querySelector和querySelectorAll

最新推荐文章于 2023-11-29 08:47:53 发布

阮太太

最新推荐文章于 2023-11-29 08:47:53 发布

阅读量676

点赞数

分类专栏： web

本文链接：https://blog.csdn.net/qq_38409767/article/details/99968540

版权

web 专栏收录该内容

66 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
	<title>全选和取消全选</title>
	<style>
	
		table>tbody td:first-child :not(:checked){
			
		}
	</style>
	<script type="text/javascript">
	window.onload = function(){
		var checAll = document.querySelector("table>thead th:first-child>input");
		// querySelector返回的是符合条件的一个元素
			var check = document.querySelectorAll("table>tbody td:first-child>input")
			// querySelectorAll反悔的是符合条件的所有元素的集合
      checAll.onclick = function () {
      ;
      	for(var i = 0 ; i<check.length;i++){
      		check[i].checked = checAll.checked;
      		
      	}
      }
      for(var i = 0 ; i<check.length;i++){
      check[i].onclick = function(){
      			if(check.checked == false){
      				checAll.checked == false;
      			}else {
      				var sele = document.querySelectorAll("table>tbody td:first-child :not(:checked)");
      				if(sele.length == 0){
      					checAll.checked =true;
      				}else{
      					checAll.checked = false;
      				}
      			}
      		}
}
	}
    

	</script>
</head>
<body>
	<h2>管理员列表</h2>
	<table border="1px" width="500px" cellspacing="0">
	  <thead>
		<tr>
			<th><input type="checkbox"/>全选</th>
			<th>管理员ID</th>
			<th>姓名</th>
			<th>操作</th>
		</tr>
	  </thead>
	  <tbody>
	  	<tr>
//*7	  		<td><input type="checkbox" name="adminID"/></td>
	40011231
	  		<td>1</td>
	  		<td>Tester</td>
	  		<td>修改 删除</td>
	  	</tr>
	  	<tr>
	  		<td><input type="checkbox" name="adminID"/></td>
	  		<td>2</td>
	  		<td>Manager</td>
	  		<td>修改 删除</td>
	  	</tr>
	  	<tr>
	  		<td><input type="checkbox" name="adminID"/></td>
	  		<td>3</td>
	  		<td>Analyst</td>
	  		<td>修改 删除</td>
	  	</tr>
	  	<tr>
	  		<td><input type="checkbox" name="adminID"/></td>
	  		<td>4</td>
	  		<td>Admin</td>
	  		<td>修改 删除</td>
	  	</tr>
	  </tbody>
	</table>
	
</body>
</html>

阮太太

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
有关document的组合查找querySelector和querySelectorAll

<!DOCTYPE html><html><head> <meta charset="utf-8"/> <title>全选和取消全选</title> <style> table>tbody td:first-child :not(:checked){ } </style&...
复制链接

扫一扫