JS实现复选框 全选 反选

 

javascript 代码段:

<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>

 

html复选框

----全选:

<INPUT name="chkAll" id="chkAll" title="全选" onClick="ChkAllClick('chkSon','chkAll')" type="checkbox" />

 

----子项:

<INPUT name="chkSon" id="chkSon1" type="checkbox"  value='1' οnclick="ChkSonClick('chkSon','chkAll')" />

<INPUT name="chkSon" id="chkSon2" type="checkbox"  value='2' οnclick="ChkSonClick('chkSon','chkAll')" />

<INPUT name="chkSon" id="chkSon3" type="checkbox"  value='3' οnclick="ChkSonClick('chkSon','chkAll')" />

……依次类推

 

----反选:

<INPUT name="chkOpposite" id="chkOpposite" title="反选" onClick="ChkOppClick('chkSon')" type="checkbox" />

 

 

稍做调整 可以应用到ASP.NET 之 DataGride Repeater GrideView DataList 中去。