La solution ultime pour sélectionner toutes les compétences CheckBox en javascript

La solution ultime pour sélectionner toutes les compétences CheckBox en javascript_javascript

WBOY

Libérer： 2016-05-16 15:58:16

original

1461 Les gens l'ont consulté

Dans le développement de nos programmes, nous utilisons souvent CheckBox pour tout sélectionner, généralement dans certains contrôles liés aux données tels que Gridview, etc.

Ce qui suit prend Repeater comme exemple et place le contrôle CheckBox dans l'en-tête et l'élément de Repeater.

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

Copier après la connexion

Ce qui suit est le script js

La méthode checkAll implémente toutes les sélections et désélections de 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;
  }
}

Copier après la connexion

La fonction checkSelectNo est utilisée pour obtenir le nombre de cases à cocher sélectionnées. Ceci est très utile lorsqu'il est utilisé pour déterminer s'il y a une case à cocher.

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

Copier après la connexion

Ce qui précède représente l’intégralité du contenu de cet article, j’espère que vous l’aimerez tous.