复选框全选、全不选跟反选的效果实现

复选框全选、全不选和反选的效果实现
<!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=gb2312" />
<title>复选框全选、全不选和反选的效果实现</title>
<script language="javascript">
	 function selectAll(){
	 	
		//计算出总共有几个多选框
		var l=document.getElementById("all").getElementsByTagName("input");
		var len=l.length;
		for(var i=1;i<=len;i++){
			//第一种方法，使用eval()方法可快速定位找到对象
			
			/*
			var box=eval("document.checkbox.C"+i);
			box.checked=true;
			*/
			
			//第二种方法
			l[i-1].checked=true;
		}
	 
	 }
	 
	 
	 function unselectAll(){
	 
	 	var l=document.getElementById("all").getElementsByTagName("input");
		var len=l.length;
		for(var i=1;i<=len;i++){
			
			var box=eval("document.checkbox.C"+i);
			box.checked=false;
			
		}
	 }
	 
	  function switchAll(){
	 
	 	var l=document.getElementById("all").getElementsByTagName("input");
		var len=l.length;
		for(var i=1;i<=len;i++){
			
			var flag=l[i-1].checked;
			if(true==flag){
				l[i-1].checked=false;
			}
			else if(false==flag){
				l[i-1].checked=true;
			}
			
			/*
			var box = eval("document.checkbox.C" + i); 
			box.checked = !box.checked;
			*/
		}
	 }
</script>

</head>

<body>
<form name=checkbox id="form">
<div id="all">
<input type=checkbox name=C1 checked>C1<br>
<input type=checkbox name=C2 checked>C2<br>
<input type=checkbox name=C3 checked>C3<br>
<input type=checkbox name=C4 checked>C4<br>
<input type=checkbox name=C5 checked>C5<br>
<input type=checkbox name=C6 checked>C6<br>
<input type=checkbox name=C7 checked>C7<br>
<input type=checkbox name=C8 checked>C8<br>
<input type=checkbox name=C9 checked>C9<br>
</div>
<br>
<input type=button value="全部选中" onClick="selectAll()"><br>
<input type=button value="全部不选" onClick="unselectAll()"><br>
<input type=button value="反选" onClick="switchAll()"><br>
</form>


</body>
</html>
复选框全选、全不选跟反选的效果实现

相关推荐
