选择框

有一些按钮,实现全选,反选,不选

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>选择框</title>
<script>
window.onload=function (){
	var oBtn1=document.getElementById('btn1');
	var oBtn2=document.getElementById('btn2');
	var oBtn3=document.getElementById('btn3');
	var oDiv=document.getElementById('div1');
	var aCh=oDiv.getElementsByTagName('input');
	oBtn1.onclick=function (){//全选
		for(var i=0;i<aCh.length;i++){//for循环将所有的选择框变为true
		 aCh[i].checked=true;
		 }
		};
	oBtn2.onclick=function (){//不选
		for(var i=0;i<aCh.length;i++){//for循环将所有的选择框变为false
		 aCh[i].checked=false;
		 }
		};
	oBtn3.onclick=function (){//反选
		for(var i=0;i<aCh.length;i++){//for循环将true变为false,将false变为true
			if(aCh[i].checked==true){
				aCh[i].checked=false;
				}else{
					aCh[i].checked=true;
					}
		 
		 }
		};
	};
</script>
</head>

<body>
<input id="btn1" type="button" value="全选"/>
<input id="btn2" type="button" value="不选"/>
<input id="btn3" type="button" value="反选"/>
<div id="div1">
<input type="checkbox"/><br>
<input type="checkbox"/><br>
<input type="checkbox"/><br>
<input type="checkbox"/><br>
<input type="checkbox"/><br>
<input type="checkbox"/><br>
<input type="checkbox"/><br>
<input type="checkbox"/><br>
<input type="checkbox"/><br>
<input type="checkbox"/><br>
<input type="checkbox"/><br>
<input type="checkbox"/><br>
</div>
</body>
</html>
原文地址:https://www.cnblogs.com/lzzhuany/p/4596120.html