Die ultimative Lösung, um alle CheckBox in Javascript_Javascript-Kenntnissen auszuwählen

In unserer Programmentwicklung verwenden wir häufig CheckBox, um alles auszuwählen, normalerweise in einigen datengebundenen Steuerelementen wie Gridview usw.

Im Folgenden wird Repeater als Beispiel verwendet und das CheckBox-Steuerelement in den Header und das Element von Repeater eingefügt.

<asp:Repeater ID="rptGroup" runat="server"> 
  <HeaderTemplate> 
    <table width="100%" cellspacing="1" >
      <tr> 
        <td width="3%" align="center" >
         <input type="checkbox" id="chkAll" name="chkAll" value="checkbox" 
         onclick="checkAll  ('chkAll',this);" />             
        </td> 
      </tr> 
  </HeaderTemplate> 
  <ItemTemplate> 
    <tr> 
    <td align="center" >
     <input type="checkbox" name="chkSelect" value='<%# Eval("ID") %>' 
     onclick="checkAll('chkAll',this);"/>
    </td> 
    </tr> 
  </ItemTemplate> 
  <FooterTemplate> 
    </table> 
  </FooterTemplate> 
 </asp:Repeater> 

Das Folgende ist das js-Skript

Die checkAll-Methode implementiert die gesamte Auswahl und Abwahl von CheckBox.

function checkAll(chkAllID, thisObj) {
  var chkAll = document.getElementById(chkAllID);
  var chks = document.getElementsByTagName("input");
  var chkNo = 0;
  var selectNo = 0;
  for (var i = 0; i < chks.length; i++) {
    if (chks[i].type == "checkbox") {
      //全选触发事件  
      if (chkAll == thisObj) {
        chks[i].checked = thisObj.checked;
      }
      //非全选触发 
      else {
        if (chks[i].checked && chks[i].id != chkAllID)
          selectNo++;
      }
      if (chks[i].id != chkAllID) {
        chkNo++;
      }
    }
  }
  if (chkAll != thisObj) {
    chkAll.checked = chkNo == selectNo;
  }
} 

Die Funktion checkSelectNo wird verwendet, um die Anzahl der ausgewählten Kontrollkästchen zu ermitteln. Dies ist sehr nützlich, wenn festgestellt werden soll, ob ein Kontrollkästchen vorhanden ist.

function checkSelectNo(chkAllID) {
  var chks = document.getElementsByTagName("input");
  var selectNo = 0;
  for (var i = 0; i < chks.length; i++) {
    if (chks[i].type == "checkbox") {
      if (chks[i].id != chkAllID && chks[i].checked) {
        selectNo++;
      }
    }
  }
  return selectNo;
} 

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er gefällt Ihnen allen.