Implementierung aller Kontrollkästchen zum Aktivieren und Deaktivieren aller Kontrollkästchen auf Basis von JavaScript-js-Tutorial-php.cn

Implementierung aller Kontrollkästchen zum Aktivieren und Deaktivieren aller Kontrollkästchen auf Basis von JavaScript

高洛峰

Freigeben： 2017-02-11 15:45:48

Original

1208 Leute haben es durchsucht

In diesem Artikel wird hauptsächlich die Implementierung aller Kontrollkästchen basierend auf JavaScript vorgestellt. Es hat einen bestimmten Referenzwert.

Das Beispiel dieses Artikels ist. Wir haben es geteilt Der spezifische Code zum Auswählen aller und Deaktivieren aller js-Kontrollkästchen als Referenz. Der spezifische Inhalt lautet wie folgt:

Implementierung aller Kontrollkästchen zum Aktivieren und Deaktivieren aller Kontrollkästchen auf Basis von JavaScript Test Der Code ist wie folgt:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <style>
    li{list-style: none;}
  </style>
</head>
<body>
  <p class="first">
    <ul class="frtInfo">
      <li class="same">
        <label><input type="checkbox" name="wp" value="wpa"/>液体</label>
      </li>
      <li class="same">
        <label><input type="checkbox" name="wp" value="wpb"/>粉末</label>
      </li>
      <li class="same">
        <label><input type="checkbox" name="wp" value="wpc"/>仿牌</label>
      </li>
      <li class="same">
        <label><input type="checkbox" name="wp" value="wpd"/>纯电池</label>
      </li>
      <li class="same">
        <label><input type="checkbox" name="wp" value="wpe"/>危险品</label>
      </li>
      <li class="same">
        <label><input type="checkbox" name="wp" value="wpd"/>配套电池</label>
      </li>
      <li class="same select">
        <label><input id="allChecked" class="allChk" type="button" name="sel" value="全选/取消" onclick="selectAllDels()"/></label>
      </li>
    </ul>
  </p>
  <script src="../js/jquery-1.11.3.js"></script>
  <script type="text/javascript">
    /*全选或取消全选*/
    function selectAllDels(){
      var allWp=document.getElementsByName("wp");
      var selOrUnsel=false;
      for(var i=0; i<allWp.length;i++){
        if(allWp[i].checked){
          selOrUnsel=true;
          break;
        }
      }
      if (selOrUnsel){
        allUnchk(allWp);
      }else{
        allchk(allWp);
      }
    }
    function allchk(allWp){
      for(var i=0; i<allWp.length;i++ ){
        allWp[i].checked=true;
      }
    }
    function allUnchk(allWp){
      for(var i=0; i<allWp.length;i++){
        allWp[i].checked=false;
      }
    }
  </script>
</body>
</html>

Nach dem Login kopieren

Eine direkte Kopie des Codes ist verfügbar.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er zum Lernen aller beiträgt. Ich hoffe auch, dass jeder die PHP-Chinesisch-Website unterstützt.

Weitere verwandte Artikel zur Implementierung der Aktivierung und Deaktivierung aller Kontrollkästchen auf Basis von JavaScript finden Sie auf der chinesischen PHP-Website!