JS实现全选框

最新推荐文章于 2025-05-20 16:08:55 发布

原创最新推荐文章于 2025-05-20 16:08:55 发布 · 3.3k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#js

前端专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现全选按钮与多个子复选框联动的方法。当全选按钮被选中时，所有子复选框将被同时选中；反之，当所有子复选框都被选中时，全选按钮也会被选中。这种方法常用于网页表单的数据选择和操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JS代码

<script type="text/javascript">
	//全选控制所有子框
	function checkAll(ckAll){
		var cks=document.getElementsByName("ck");
		for(var i=0;i<cks.length;i++){
			cks[i].checked=ckAll.checked;
		}
	}
	//通过子框控制全选
	window.function(){
		//给每一个子框绑定一个点击事件，每次触发都判断是否全选
		var cks = document.getElementsByName("ck");
		for(var i=0; i<cks.length; i++){
			cks[i].onclick=function(){
				//循环每一个按钮的值，判断是否选中
				var flag = true;
				var ckArr = document.getElementsByName("ck");
				for (var j=0; j<ckArr.length; j++) {
					//有未选中即终止循环，修改标记
					if(!ckArr[j].checked){
						flag = false;
						break;
					}
				}
				//通过标记控制全选
				if(flag){
					document.getElementById("ckAll").checked=true;
				}else{
					document.getElementById("ckAll").checked=false;
				}
			}
		}
	}
</script>

HTML代码

<input type="checkbox" id="ckAll" onclick="checkAll(this)"/>全选<br/>
<input type="checkbox" name="ck"/>aaa<br/>
<input type="checkbox" name="ck"/>aaa<br/>
<input type="checkbox" name="ck"/>aaa<br/>
<input type="checkbox" name="ck"/>aaa<br/>
<input type="checkbox" name="ck"/>aaa<br/>
<input type="checkbox" name="ck"/>aaa<br/>
<input type="checkbox" name="ck"/>aaa<br/>
<input type="checkbox" name="ck"/>aaa<br/>