复选框的全选和取消全选

最新推荐文章于 2024-04-25 11:38:14 发布

我为杰伦代言

最新推荐文章于 2024-04-25 11:38:14 发布

阅读量1.1k

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_52385232/article/details/126728160

版权

JavaScript 专栏收录该内容

37 篇文章 0 订阅

订阅专栏

复选框的全选和取消全选

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>复选框的全选和取消全选</title>
	</head>
	<body>
		<script type="text/javascript">
			/*
			window.onload = function(){
				var firstChk = document.getElementById("firstChk");
				firstChk.onclick = function(){
					// 获取第一个复选框的选中状态(复选框对象checkbox对象)
					//alert(firstChk.checked);
					// 根据name获取所有元素
					var aihaos = document.getElementsByName("aihao");
					if(firstChk.checked){
						// 全选
						for(var i = 0; i < aihaos.length; i++){
							aihaos[i].checked = true;
						}
					}else{
						// 取消全选
						for(var i = 0; i < aihaos.length; i++){
							aihaos[i].checked = false;
						}
					}
				}
			}
			*/
		   
			window.onload = function(){
				
				var aihaos = document.getElementsByName("aihao");
				var firstChk = document.getElementById("firstChk");
				firstChk.onclick = function(){
					for(var i = 0; i < aihaos.length; i++){
						aihaos[i].checked = firstChk.checked;
					}
				}
				
				// 对以上数组进行遍历
				var all = aihaos.length;
				for(var i = 0; i < aihaos.length; i++){
					aihaos[i].onclick = function(){
						var checkedCount = 0;
						// 总数量和选中的数量相等的时候,第一个复选框选中.
						for(var i = 0; i < aihaos.length; i++){
							if(aihaos[i].checked){
								checkedCount++;
							}
						}
						firstChk.checked = (all == checkedCount);
						/*
						if(all == checkedCount){
							firstChk.checked = true;
						}else{
							firstChk.checked = false;
						}
						*/
					}
				}
			}
		</script>
		<input type="checkbox" id="firstChk"/><Br>
		<input type="checkbox" name="aihao" value="smoke" />抽烟<Br>
		<input type="checkbox" name="aihao" value="drink" />喝酒<Br>
		<input type="checkbox" name="aihao" value="tt" />烫头<Br>
	</body>
</html>