JS之复选框的全选和取消全选

1、复选框id.checked
可获取复选框的选中状态(true / false)
2、getElementsByName("name")
根据name获取所有元素

代码示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
    </head>
	<body>
		<script type="text/javascript">
			window.onload = function(){
				var allCheck = document.getElementById("allCheck");
				//根据name获取所有元素
				var fruits = document.getElementsByName("fruit");
				//给allCheck复选框绑定onclick事件
				allCheck.onclick = function(){
					//获取allCheck复选框的选中状态(返回true/false)
					var checkState = allCheck.checked;
					for (var i = 0; i < fruits.length; i++) {
						//将allCheck复选框的状态传给每一个fruit
						fruits[i].checked = checkState;
					}
				}
				/*fruit全部选中时将allCheck也选中*/
				//fruit的总数量
				var all = fruits.length;
				for (var i = 0; i < fruits.length; i++) {
					fruits[i].onclick = function(){
						var checkedCount = 0;
						//总数量和选中数量相等时将allCheck选中
						for (var i = 0; i < fruits.length; i++) {
							if(fruits[i].checked){
								checkedCount++;
							}
						}
						//相等时返回true,不相等时返回false
						allCheck.checked = (all == checkedCount);
					}
				}
			}
		</script>
		<input type="checkbox" id="allCheck" />全部选中<br /><br />
		<input type="checkbox" name="fruit" value="apple" />苹果<br />
		<input type="checkbox" name="fruit" value="banana" />香蕉<br />
		<input type="checkbox" name="fruit" value="pear" />梨<br />
	</body>
</html>

点击全部选中:
在这里插入图片描述
取消苹果选项(全部选中复选框自动取消):
在这里插入图片描述
再将苹果勾选上(全部选中自动勾选):
在这里插入图片描述

posted @ 2020-09-09 22:05  YU_UY  阅读(1320)  评论(0编辑  收藏  举报