JavaScript implementiert die Kontrollkästchenauswahlfunktion

In diesem Artikelbeispiel wird der spezifische JavaScript-Code zur Auswahl aller Kontrollkästchen als Referenz angegeben. Der spezifische Inhalt ist wie folgt

Code:

<!DOCTYPE html>
<html lang="de">

<Kopf>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-kompatibel" content="IE=edge">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
    <title>Dokument</title>
    <Stil>
        Tisch {
            Breite: 300px;
            Rahmenabstand: 0;
            /* Textausrichtung: zentriert; */
            Rand: 100px automatisch;
            Rahmen-Zusammenbruch: Zusammenbruch;
        }
        
        Tabelle tr:n-tes-Kind(n+2)>td {
            Textausrichtung: links;
            Hintergrundfarbe: RGB (250, 245, 245);
            Farbe: dunkelgrau;
            Schriftgröße: 14px;
        }
        
        Tabelle tr:ntes-Kind(1) {
            Hintergrundfarbe: himmelblau;
            Farbe: weiß;
        }
        
        Mai,
        td {
            Polsterung: 10px;
            Rand: 0,5px durchgehend grau;
        }
    </Stil>
</Kopf>

<Text>
    <Tabelle>
        <tr>
            <th><input type="checkbox" name="" id="alle"></th>
            <th>Produkte</th>
            <th>Preis</th>
        </tr>
        <tr>
            <td><input Typ="Checkbox" Name="" ID="ip8"></td>
            <td>iPhone8</td>
            <td>8000</td>
        </tr>
        <tr>
            <td><input Typ="Checkbox" Name="" ID="pro"></td>
            iPad Pro
            <td>5000</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="" id="Luft"></td>
            iPad Air
            <td>2000</td>
        </tr>
        <tr>
            <td><input Typ="Checkbox" Name="" ID="Uhr"></td>
            <td>Apple Watch</td>
            <td>2000</td>
        </tr>
    </Tabelle>

    <Skript>
        var alle = document.getElementById('alle');
        var Elemente = document.querySelectorAll('tr>td>input');
        alle.onclick = Funktion() {
            für (var i = 0; i < Elemente.Länge; i++) {
                Elemente[i].checked = dies.checked;
            }
        }


        für (var i = 0; i < Elemente.Länge; i++) {
            Elemente[i].onclick = Funktion() {
                var flag_all = 1;
                für (var j = 0; j < Elemente.Länge; j++) {
                    wenn (items[j].checked == 0) {
                        flag_alle = 0;
                        alle.geprüft = flag_alle;
                        brechen;
                    }
                }
                alle.geprüft = flag_alle;
            }
        }
    </Skript>
</body>

</html>

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

Das könnte Sie auch interessieren:

JS implementiert die Funktionen zum Auswählen aller und Löschen von Kontrollkästchenstapeln
JS implementiert die Funktion zum Auswählen aller Kontrollkästchen, zum Aufheben der Auswahl oder zum Aufheben der Auswahl aller Kontrollkästchen
JS implementiert die Funktion zum Auswählen und Abwählen aller in der CheckBox
So aktivieren/deaktivieren Sie alle Kontrollkästchen mit js und jQuery
js realisiert den Effekt der Auswahl und Deaktivierung aller Kontrollkästchen
js html css, um Kontrollkästchen für die gesamte Auswahl und die umgekehrte Auswahl zu erreichen
Detaillierte Erläuterung von Javascript zur Implementierung von Kontrollkästchen-Allesauswahl- und umgekehrten Auswahlereignissen
Javascript-Checkbox-Auswahl/alle Spezialeffekte auswählen
So implementieren Sie die Kontrollkästchenfunktion „Alle auswählen“ in JS
Aktivieren und deaktivieren Sie alle Kontrollkästchen basierend auf JavaScript

<<: Weitere Möglichkeiten zur Verwendung von spitzen Klammern in Bash

>>: 2017 neueste Version der Windows-Installation MySQL-Tutorial