suchen

Heim  >  Artikel  >  Web-Frontend  >  Implementierung aller Kontrollkästchen zum Aktivieren und Deaktivieren aller Kontrollkästchen auf Basis von JavaScript

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

高洛峰
高洛峰Original
2017-02-11 15:45:481169Durchsuche

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

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!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Erweitertes JavaScript (10) Array Detaillierte Erläuterung von ArraysNächster Artikel：Erweitertes JavaScript (10) Array Detaillierte Erläuterung von Arrays

In Verbindung stehende Artikel

Mehr sehen