JavaScript表格全选按钮点击

最新推荐文章于 2023-02-11 02:05:04 发布

想一起听海

最新推荐文章于 2023-02-11 02:05:04 发布

阅读量278

点赞数 2

文章标签： javascript servlet 前端

本文链接：https://blog.csdn.net/weixin_68683361/article/details/127104481

版权

JavaScript实现表格的全选

HTML代码如下:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<table border="0" cellspacing="" cellpadding="">
		<input type="checkbox" id="selectAll" />
		<hr />
		<ul class="shop">
			<li><input type="checkbox" />苹果</li>
			<li><input type="checkbox" />梨</li>
			<li><input type="checkbox" />葡萄</li>
			<li><input type="checkbox" />香蕉</li>
			<li><input type="checkbox" />榴莲</li>
		</ul>
		</table>
	</body>
</html>

实现的效果

接下来我们需要给全选绑定单击事件，触发单机事件的元素，获取所有单选的复原框，for循环将全选状态赋值水果复选框

<script type="text/javascript">
			//给全选绑定单机事件
			document.getElementById("selectAll").onclick = function() {
				//this指当前触发单机事件的元素
				console.log(this.checked)
				//得到全选的选中状态
				var ischecked = this.checked
				//获取所有单选的复原框
				var cbs = document.querySelectorAll(".shop input")
				//循环将全选状态赋值水果复选框
				for (var i = 0; i < cbs.length; i++) {
					cbs[i].checked = ischecked

				}
			}
		</script>