js实现复选框的全选与反选
js实现复选框的全选与反选作用：
a.单击列头复选框全选或全不选子项
b.只要有一个子项没有选中，则取消列头的选中状态
c.当所有子项目选中时，列头复选框自动置为选中状态
d.将子项的复选框反过来选
<!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=gb2312"><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.checked!=tempState) arrSon.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.checked) { cbAll.checked = false; return; } } cbAll.checked = true;}// --反选被单击---function ChkOppClick(sonName){ var arrSon = document.getElementsByName(sonName); for(i=0;i<arrSon.length;i++) {arrSon.click(); }}</script></head><body><form name="form1" method="post" action=""><table width="500" border="1"><tr bgcolor="#FFFF66"> <td> <INPUT name="chkAll" id="chkAll" title="全选"type="checkbox" />全选</td> <td align="center">复选框全选示例 </td> <td>&nbsp;</td> <td>&nbsp;</td></tr><tr> <td><INPUT name="chkSon" id="chkSon1" type="checkbox"value='1'/>1</td> <td> 作用： </td> <td>&nbsp;</td> <td>&nbsp;</td></tr><tr> <td><INPUT name="chkSon" id="chkSon2" type="checkbox"value='2'/>2</td> <td> a.单击列头复选框全选或全不选子项 </td> <td>&nbsp;</td> <td>&nbsp;</td></tr><tr> <td><INPUT name="chkSon" id="chkSon3" type="checkbox"value='3'/>3</td> <td> b.只要有一个子项没有选中，则取消列头的选中状态 </td> <td>&nbsp;</td> <td>&nbsp;</td></tr><tr> <td><INPUT name="chkSon" id="chkSon4" type="checkbox"value='4'/>4</td> <td> c.当所有子项目选中时，列头复选框自动置为选中状态 </td> <td>&nbsp;</td> <td>&nbsp;</td></tr> <tr bgcolor="#66FFFF"> <td><INPUT name="chkOpposite" id="chkOpposite" title="反选"type="checkbox" />反选</td> <td align="center">反选示例</td> <td>&nbsp;</td> <td>&nbsp;</td></tr></table></form></body></html>
页:
[1]