复选框的全选或全取消操作中遇到的问题

最新推荐文章于 2022-11-04 16:23:24 发布

我从崖边跌落1

最新推荐文章于 2022-11-04 16:23:24 发布

阅读量344

点赞数

分类专栏： web技术基础文章标签： html 前端

本文链接：https://blog.csdn.net/m0_56670717/article/details/122285798

版权

web技术基础专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1.getElementById和querySelector方法的区别

①规范不同

②如果只要一次查找就可得到元素时，首选getXXXByXXX ；

如果需要经过多级查找，才能得到元素时，首选querySelector

所以在这里直接都选择querySelector

2.用法：

获取文档中 id="demo" 的元素：

document.querySelector("#demo");

注意： querySelector() 方法仅仅返回匹配指定选择器的第一个元素。如果你需要返回所有的元素，请使用 querySelectorAll() 方法替代。//引用规范要用到CSS选择器的知识

3.写具体函数之前记得加function!!!

4.注意事项querySelector()而不是querySelect（）！！！

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<style type="text/css">
		.box{
			widows: 300px;
			margin: 100px auto;
		}
		thead {
			columns: #fff;
			background-color: #008dd0;
		}
	</style>
</head>
<body>
	<div class="box">
	<table border="1" cellspacing="0" cellpadding="5" width="200" align="center">
		<thead>
			<tr>
				<th><input type="checkbox" value="0" id="cbAll" onclick="function1()"></th>
				<th>运动</th>
			</tr>
		</thead>
		<tbody id="tb">
			<tr>
				<td><input type="checkbox" value="1" onclick="function2()" ></td>
				<td>跳绳</td>
			</tr>
			<tr>
				<td><input type="checkbox" value="2" onclick="function2()" ></td>
				<td>跑步</td>
			</tr>
			<tr>
				<td><input type="checkbox" value="3" onclick="function2()" ></td>
				<td>游泳</td>
			</tr>
		</tbody>
	</table>
	</div>
	<script>
		var all=document.querySelector('#cbAll');
		var sports=document.querySelector('#tb').querySelectorAll('input');
		function function1()
		{
			for (var i = 0; i < sports.length; i++) {
	 			sports[i].checked=all.checked;
			}
		}
		function function2()
		{
			var flag=true;
			for (var i = 0; i < sports.length; i++) {
			 if(!sports[i].checked){
			 	flag=false;
			 	break;
			}
		}
			all.checked=flag;

		}
	</script>
</body>
</html>