暑期学习日记34：js全选功能

最新推荐文章于 2024-05-23 20:56:45 发布

土肥圆波太郎

最新推荐文章于 2024-05-23 20:56:45 发布

阅读量91

点赞数

文章标签：学习

本文链接：https://blog.csdn.net/weixin_48485475/article/details/126633286

版权

今天学习了使用js实现全选功能，点击全选的复选框后会将下面所有的复选框变为被选择状态。

代码如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>js全选功能</title>
	<style>
		table{
			border: 1px solid black;
		}
		td,th{
			width: 100px;
			height: 50px;
			text-align: center;
		}
		td{
			background:#ddd;
		}
		th{
			background:lightgray;
		}
	</style>
</head>
<body>
	<table>
		<tr>
			<th><input type="checkbox" id="checkall">全选</th>
			<th>商品名</th>
			<th>价格</th>
		</tr>
		<tr>
			<td><input type="checkbox" class="check"></td>
			<td>html</td>
			<td>9.9</td>
		</tr>
		<tr>
			<td><input type="checkbox" class="check"></td>
			<td>css</td>
			<td>19.9</td>
		</tr>
		<tr>
			<td><input type="checkbox" class="check"></td>
			<td>js</td>
			<td>99.9</td>
		</tr>
	</table>
	<script>
		let checkall=document.getElementById("checkall");
		let check=document.querySelectorAll('.check');
		checkall.addEventListener('click',function(){
			let checkvalue=checkall.checked;
			check.forEach(function(ele){
						  ele.checked=checkvalue
						  })
		})
	</script>
</body>
</html>

显示效果为：