看了之后,觉得不错,以备使用:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>全选与反选</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script language="javascript">
// --列头全选框被单击---
function ChkAllClick(sonName, cbAllId){
var arrSon = document.getElementsByName(sonName);
var cbAll = document.getElementById(cbAllId);
var tempState=cbAll.checked;
for(i=0;i<arrSon.length;i++) {
if(arrSon[i].checked!=tempState)
arrSon[i].click();
}
}
// --子项复选框被单击---
function ChkSonClick(sonName, cbAllId) {
var arrSon = document.getElementsByName(sonName);
var cbAll = document.getElementById(cbAllId);
for(var i=0; i<arrSon.length; i++) {
if(!arrSon[i].checked) {
cbAll.checked = false;
return;
}
}
cbAll.checked = true;
}
// --反选被单击---
function ChkOppClick(sonName){
var arrSon = document.getElementsByName(sonName);
for(i=0;i<arrSon.length;i++) {
arrSon[i].click();
}
}
</script>
</head>
<body>
<form name="form1" method="post" action="">
<table width="600" border="1">
<tr >
<td width="10%">
<INPUT name="chkAll" id="chkAll" title="全选" onClick="ChkAllClick('chkSon[]','chkAll')"
type="checkbox" />全选</td>
<td align="center">复选框全选示例 </td>
</tr>
<tr>
<td><INPUT name="chkSon[]" id="chkSon1" type="checkbox" value='1'
onclick="ChkSonClick('chkSon[]','chkAll')" />1</td>
<td> 作用: </td>
</tr>
<tr>
<td><INPUT name="chkSon[]" id="chkSon2" type="checkbox" value='2'
onclick="ChkSonClick('chkSon[]','chkAll')" />2</td>
<td> a.单击列头复选框全选或全不选子项 </td>
</tr>
<tr>
<td><INPUT name="chkSon[]" id="chkSon3" type="checkbox" value='3'
onclick="ChkSonClick('chkSon[]','chkAll')" />3</td>
<td> b.只要有一个子项没有选中,则取消列头的选中状态 </td>
</tr>
<tr>
<td><INPUT name="chkSon[]" id="chkSon4" type="checkbox" value='4'
onclick="ChkSonClick('chkSon[]','chkAll')" />4</td>
<td> c.当所有子项目选中时,列头复选框自动置为选中状态 </td>
</tr>
<tr>
<td><INPUT name="chkSon[]" id="chkSon5" type="checkbox" value='5'
onclick="ChkSonClick('chkSon[]','chkAll')" />5</td>
<td>d.将复选框反过来选</td>
</tr>
<tr>
<td><INPUT name="chkSon[]" id="chkSon6" type="checkbox" value='6'
onclick="ChkSonClick('chkSon[]','chkAll')" />6</td>
<td>F:注意input的name写为chkSon[],在提交的POST中复选的value值都在一个数组中,
然后可以使用各种方法实现批量删除。</td>
</tr>
<tr>
<td><INPUT name="chkOpposite" id="chkOpposite" title="反选"
onClick="ChkOppClick('chkSon')" type="checkbox" />反选</td>
<td align="center">反选示例</td>
</tr>
</table>
</form>
</body>
</html>