JavaScript DOM编程之复选框的取消和全选

案列

当选中第一个复选框时,下面复选框全部选中,取消时,全部取消。
并且当下面复选框全部选中时,第一个复选框选中,其他的没有全部选中时,第一个取消。

document.getElementById(“firstChk”).checked获取复选框的值,选中为true;
var otherChks = document.getElementsByName(“otherChk”);返回一个数组;

<body>
		<script type="text/javascript">
			window.onload = function(){
			    var otherChks = document.getElementsByName("otherChk");
				document.getElementById("firstChk").onclick = function(){
					for(var i =0;i<otherChks.length;i++){
						otherChks[i].checked = document.getElementById("firstChk").checked;
					}
				}
				for(var i=0;i<otherChks.length;i++){
					otherChks[i].onclick = function(){
						var all = 0;
						for(var i=0;i<otherChks.length;i++){
							if(otherChks[i].checked){
								all++;
								
							}
						}
					    document.getElementById("firstChk").checked = (all == (otherChks.length));
					}
					
				}
				
				
			}
		</script>
		
		<input type="checkbox" id="firstChk" /><br />
		<input type="checkbox" name="otherChk" /><br />
		<input type="checkbox" name="otherChk" /><br />
		<input type="checkbox" name="otherChk" /><br />
	</body>
发布了82 篇原创文章 · 获赞 6 · 访问量 4472

猜你喜欢

转载自blog.csdn.net/OVO_LQ_Start/article/details/104590512