利用Javascript实现全选和全不选

最新推荐文章于 2023-04-15 15:13:09 发布

我亦是行人，行到天涯水穷处

最新推荐文章于 2023-04-15 15:13:09 发布

阅读量7.8k

点赞数 4

本文链接：https://blog.csdn.net/mover999/article/details/82913672

版权

最近开始练习js的基本操作，常常因为一些小疏忽导致页面效果无法实现。这篇博客中我来总结一下如何js实现全选和全不选。

1.首先你需要了解input标签中复选框。当该复选框被选中时，调用该元素checked属性的值为true。这一点是我们利用js实现该效果的第一个要点。

2.全选：当鼠标点击全选这个复选框时，调用函数allSelet().使用for循环遍历每一个需要被选中的input元素（我们它们全部放在箱子里面），并给它们的checked属性赋值true。这样就完成了全选。

3.全不选：当鼠标点击全选这个复选框时，调用函数noSelet().使用for循环遍历每一个需要被选中的input元素（包括全选那个复选框，所以我们直接从document中获取input），并给它们的checked属性赋值false。这样就完成了全不选。

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>Who is the best one?</title>
		<style type="text/css">
			*{
				background: greenyellow;
			}
		</style>
	</head>

	<body>
		<input type="checkbox" onclick="allSelect()"/>全选
	    <input type="checkbox" onclick="noSelect()"/>全不选
		<div id="box">
			<input type="checkbox" />选我
			<input type="checkbox" />选我
			<input type="checkbox" />选我
			<input type="checkbox" />选我
			<input type="checkbox" />选我
			<input type="checkbox" />选我
		</div>
		<script type="text/javascript ">
			function allSelect() {
				var oBox = document.getElementById("box");
				var aInput = oBox.getElementsByTagName("input");
				for(var i = 0; i < aInput.length; i++) {
					aInput[i].checked = true;
				}

			}
			function noSelect() {
				var oBox = document.getElementById("box");
				var aInput = document.getElementsByTagName("input");
				for(var i = 0; i < aInput.length; i++) {
					aInput[i].checked = false;
				}
			}
		</script>
	</body>

</html>

当你点击全选时