<!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>
433
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
