Javascript, alles auswählen, abbrechen

JavaScript ist eine weit verbreitete Skriptsprache, die häufig für die Front-End-Webentwicklung verwendet wird. In der Webentwicklung geht es häufig um die Implementierung der Funktionen „Alle auswählen“ und „Alle abwählen“. Zu diesem Zeitpunkt müssen wir normalerweise JavaScript verwenden. In diesem Artikel wird erläutert, wie Sie mithilfe von JavaScript die Funktionen „Alle auswählen“ und „Alle abwählen“ implementieren.

1. HTML-Code

Bevor wir die Funktionen „Alle auswählen“ und „Alle abwählen“ implementieren, müssen wir zuerst den HTML-Code schreiben. Hier ist ein Beispiel-HTML-Code, einschließlich Tabellenkopf und Inhalt:

<div class="tableContainer">
  <table>
    <thead>
      <tr>
        <th><input type="checkbox" id="selectAll"/>Javascript, alles auswählen, abbrechen</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><input type="checkbox" class="checkbox"/></td>
        <td>张三</td>
        <td>20</td>
        <td>男</td>
      </tr>
      <tr>
        <td><input type="checkbox" class="checkbox"/></td>
        <td>李四</td>
        <td>25</td>
        <td>男</td>
      </tr>
      <tr>
        <td><input type="checkbox" class="checkbox"/></td>
        <td>王五</td>
        <td>30</td>
        <td>女</td>
      </tr>
    </tbody>
  </table>
</div>

Im Tabellenkopf haben wir ein Kontrollkästchen „Alle auswählen“ hinzugefügt und seine ID auf „selectAll“ gesetzt, die erste Zelle jeder Zeile in den anderen Zeilen. Ein Kontrollkästchen ist wird ebenfalls zum Raster hinzugefügt und seine Klasse wird auf „checkbox“ gesetzt.

2. JavaScript-Code

Als nächstes müssen wir JavaScript-Code schreiben, um unsere Funktionen zu implementieren. Wir müssen dem Kontrollkästchen „Alle auswählen“ am Kopf der Tabelle und dem Kontrollkästchen jeder Zeile Ereignisse hinzufügen, um die Funktionen „Alle auswählen“ und „Alle abwählen“ zu implementieren. Das Folgende ist der JavaScript-Code:

<script>
  // 获取表格头部的Javascript, alles auswählen, abbrechencheckbox
  var selectAll = document.getElementById("selectAll");
  // 获取每一行中的checkbox
  var checkboxes = document.getElementsByClassName("checkbox");
 
  // 给表格头部的Javascript, alles auswählen, abbrechencheckbox绑定点击事件
  selectAll.onclick = function() {
    // 循环遍历每一行的checkbox
    for(var i=0; i < checkboxes.length; i++) {
      // 将每一行的checkbox的选中状态设置为表格头部的Javascript, alles auswählen, abbrechencheckbox的选中状态
      checkboxes[i].checked = selectAll.checked;
    }
  }
 
  // 循环遍历每一行的checkbox
  for(var i=0; i < checkboxes.length; i++) {
    // 给每一个checkbox绑定点击事件
    checkboxes[i].onclick = function() {
      // 定义一个变量，表示是否所有行中的checkbox都被选中
      var isCheckedAll = true;
      // 循环遍历每一行的checkbox
      for(var j=0; j < checkboxes.length; j++) {
        // 如果有一个checkbox没有被选中，将isCheckedAll设置为false
        if(!checkboxes[j].checked) {
          isCheckedAll = false;
          break;
        }
      }
      // 将表格头部的Javascript, alles auswählen, abbrechencheckbox的选中状态设置为isCheckedAll
      selectAll.checked = isCheckedAll;
    }
  }
</script>

3. Implementieren Sie den Effekt

Nachdem die HTML- und JavaScript-Codes abgeschlossen sind, können wir die Funktionen „Alle auswählen“ und „Alle abwählen“ implementieren.

Wenn der Benutzer das Kontrollkästchen „Alle auswählen“ in der Kopfzeile der Tabelle aktiviert, werden die Kontrollkästchen in allen Zeilen automatisch aktiviert:

Wenn der Benutzer das Kontrollkästchen „Alle auswählen“ in der Kopfzeile der Tabelle deaktiviert, werden die Kontrollkästchen aktiviert Alle Zeilen werden automatisch aktiviert. Alle Kontrollkästchen werden automatisch deaktiviert:

Und wenn der Benutzer das Kontrollkästchen einer bestimmten Zeile aktiviert oder deaktiviert, wird das Kontrollkästchen „Alle auswählen“ am Kopf der Tabelle automatisch aktiviert oder deaktiviert zum Kontrollkästchenstatus aller Zeilen. Deaktivieren Sie:

Oben erfahren Sie, wie Sie JavaScript verwenden, um die Funktionen „Alle auswählen“ und „Alle abwählen“ zu implementieren. Durch das Schreiben von HTML- und JavaScript-Code können wir die Funktionen zum Auswählen und Abwählen aller Elemente einfach implementieren und so die Benutzererfahrung der Webseite verbessern.

Das obige ist der detaillierte Inhalt vonJavascript, alles auswählen, abbrechen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!