js实现复选框的全选与反选.docVIP

js实现复选框的全选与反选a.单击列头复选框全选或全不选子项 b.只要有一个子项没有选中，则取消列头的选中状态 c.当所有子项目选中时，列头复选框自动置为选中状态 d.将子项的复选框反过来选 代码如下： !DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN /TR/html4/loose.dtdhtmlheadtitle全选与反选/titlemeta http-equiv=Content-Type content=text/html; charset=gb2312script language=javascript// --列头全选框被单击---function ChkAllClick(sonName, cbAllId){var arrSon = document.getElementsByName(sonName);var cbAll = document.getElementById(cbAllId);var tempState=cbAll.checked;for(i=0;iarrSon.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; iarrSon.length; i++) {if(!arrSon[i].checked) {cbAll.checked = false;return;}}cbAll.checked = true;} // --反选被单击---function ChkOppClick(sonName){var arrSon = document.getElementsByName(sonName);for(i=0;iarrSon.length;i++) {arrSon[i].click();}}/script/head bodyform name=form1 method=post action=table width=500 border=1tr bgcolor=#FFFF66tdINPUT name=chkAll id=chkAll title=全选 onClick=ChkAllClick(chkSon,chkAll) type=checkbox /全选/tdtd align=center复选框全选示例 /tdtdnbsp;/tdtdnbsp;/td/trtrtdINPUT name=chkSon id=chkSon1 type=checkbox value=1 onclick=ChkSonClick(chkSon,chkAll) /1/tdtd 作用： /tdtdnbsp;/tdtdnbsp;/td/trtrtdINPUT name=chkSon id=chkSon2 type=checkbox value=2 onclick=ChkSonClick(chkSon,chkAll) /2/tdtd a.单击列头复选框全选或全不选子项 /tdtdnbsp;/tdtdnbsp;/td/trtrtdINPUT name=chkSon id=chkSon3 type=checkbox value=3 onclick=ChkSonClick(chkSon,chkAll) /3/tdtd b.只要有一个子项没有选中，则取消列头的选中状态 /tdtdnbsp;/tdtdnbsp;/td/trtrtdINPUT name=chkSon id=chkSon4 type=checkbox value=4 onclick=ChkSonClick(chkSon,chkAll) /4/tdtd c.当所有子项目选中时，列头复选框自动置为选中状态 /tdtdnbsp;/tdtdnbsp;/td/trtrtdINPUT name=chkSon id=chkSon5 type=checkbox value=5 onclick=ChkSonClick(chkSon,chkAll) /5/tdtdnbsp;/tdtdnbsp;/tdtdnbsp;/td/trtrtdINPUT name=chkSon id=chkSon6 ty