欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

全选反选

程序员文章站 2022-06-01 13:17:06
...
<head>
	<meta charset="UTF-8">
	<title></title>
	<script type="text/javascript">
		
		
		window.onload=function(){
			
			//获取name=interest的标签集合
			var interests=document.getElementsByName("interest");
			//全选函数
			document.getElementById("chkAll").onclick=function(){
				
				for(var i=0;i<interests.length;i++){
					interests[i].checked=this.checked;
				}
				
			}
			
			//反选函数
			document.getElementById("btnReverse").onclick=function(){
				
				for(var i=0;i<interests.length;i++){
					interests[i].checked=!interests[i].checked;
				}
				//检查全选
				checkAll();
			}
			
			//所有选中则全选前加对勾,有一项没选中,全选没对勾
			function checkAll(){
				var count=0;
				for(var i=0;i<interests.length;i++){
					if (interests[i].checked) {
						count++;
					}
				}
				
				if (count==interests.length) {
					document.getElementById("chkAll").checked=true;
				}else{
					document.getElementById("chkAll").checked=false;
				}
				
			}
			
			//单击每一个复选框时,检查全选框的状态
			for(var i=0; i<interests.length; i++){
				interests[i].onclick = checkAll;
			}
		}
		
	</script>
	
</head>

<body>
	<input type="checkbox" id="chkAll" />全选
	<input type="button" id="btnReverse" value="反选" />

	<br/><br/>

	<input type="checkbox" name="interest" value="唱歌" />唱歌
	<input type="checkbox" name="interest" value="跳舞" />跳舞
	<input type="checkbox" name="interest" value="跑步" />跑步
	<input type="checkbox" name="interest" value="游泳" />游泳
</body>
相关标签: js