JavaScript：复选框的全选和取消全选

最新推荐文章于 2023-12-13 11:28:53 发布

大大大大碟

最新推荐文章于 2023-12-13 11:28:53 发布

阅读量626

点赞数 1

文章标签： javascript java

本文链接：https://blog.csdn.net/weixin_56283510/article/details/127068795

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>练习复选框的全选和取消全选</title>

	</head>
	<body>
		<script type="text/javascript">
			window.onload = function() {
				//让全选框控制全选或全不选
				//获取全选框
				var allChkObj = document.getElementById("allChk");
				//获取其他复选框的对象数组
				var peoples = document.getElementsByName("people");
				//设置单击事件
				allChkObj.onclick = function() {
					//遍历复选框数组
					for (var i = 0; i < peoples.length; i++) {
						peoples[i].checked = allChkObj.checked;
					}
				}
				//实现通过复选框的全选-->全选按钮选中,未全选中-->全选按钮不选
				//遍历复选框按钮
				for (var i = 0; i < peoples.length; i++) {
					//为每一个复选框按钮,添加单击事件
					peoples[i].onclick = function() {
						//计算复选框按钮的总数
						var allChks = peoples.length;
						//循环时选中的复选框数量
						var chkCount = 0;
						//通过for循环得到事件结束时,有多少复选框被选中
						for (var i = 0; i < peoples.length; i++) {
							if (peoples[i].checked) {
								chkCount++;
							}
						}
						//全选框的状态是与复选框的总数和循环结束时选中的复选框的数量有关的
						//若复选框的总数和循环结束时选中的复选框的数量相等,即全选框选中,反之,不选中
						allChkObj.checked = (allChks == chkCount);
					}
				}

			}
		</script>

		<input type="checkbox" id="allChk" />全选<br>
		<input type="checkbox" name="people" />小明<br>
		<input type="checkbox" name="people" />小米<br>
		<input type="checkbox" name="people" />小红<br>
	</body>
</html>