JavaScript zum Implementieren der Auswahl oder Stornierung von Kontrollkästchen

In diesem Artikel wird der spezifische JavaScript-Code zum Auswählen oder Deaktivieren aller Kontrollkästchen zu Ihrer Information bereitgestellt. Der spezifische Inhalt ist wie folgt

Umsetzungsideen

1. Holen Sie sich das gesamte Auswahlfeld und alle kleinen Auswahlfeldelementobjekte
2. Schaltflächensteuerung: Kleine Schaltflächen – Binden Sie das Onclick-Ereignis an das Hauptkontrollkästchen und den Ereignishandler – eine For-Schleife, die über alle kleinen Kontrollkästchen iteriert und ihnen den Attributwert „checked“ des Hauptkontrollkästchens zuweist.
3. Kleine Schaltflächen wirken sich auf die Hauptschaltfläche aus - - - Die For-Schleife bindet das Klickereignis an jedes kleine Kontrollkästchen und prüft bei jedem Klick, ob alle Kontrollkästchen in der For-Schleife ausgewählt sind:
Setzen Sie eine Variable flag, um den ausgewählten Status der Hauptschaltfläche zu steuern. Der Anfangswert ist true. Die for-Schleife iteriert und überprüft den ausgewählten Status jedes kleinen Kontrollkästchens. Solange eines nicht ausgewählt ist, flag = false, springt break aus der Schleife und überprüft den Status der folgenden kleinen Kontrollkästchen nicht mehr. Schließlich ist der geprüfte Attributwert der Hauptschaltfläche = flag

Hinweis: In HTML ist der ausgewählte Status „checked“ = „aktiviert“, in JS jedoch ist der ausgewählte Status „checked“ = „true“; der nicht aktivierte Status „checked“ = „false“;

Vorschlag: Für diese Art von Attributwert können Sie ihn in der Konsole ausdrucken, um den Wert anzuzeigen

Codebeispiel

<!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>Mehrfachauswahlfeld</title>
    <Stil>
        .Kasten {
            Breite: 300px;
            Rand: 100px automatisch;
        }
        
        thead {
            Farbe: #fff;
            Hintergrundfarbe: #008dd0;
        }
    </Stil>
</Kopf>

<Text>
    <div Klasse="Box">
        <table border="1" cellspacing="0" cellpadding="5" width="200" align="center">
            <Kopf>
                <tr>
                    <th><input type="checkbox" value="0" id="cbAll"></th>
                    <th>Sport</th>
                </tr>
            </thead>
            <tbody id="tb">
                <tr>
                    <td><Eingabetyp="Kontrollkästchen" Wert="1"></td>
                    <td>Läuft</td>
                </tr>
                <tr>
                    <td><Eingabetyp="Kontrollkästchen" Wert="2"></td>
                    <td>Seilspringen</td>
                </tr>
                <tr>
                    <td><Eingabetyp="Kontrollkästchen" Wert="3"></td>
                    Yoga
                </tr>
                <tr>
                    <td><Eingabetyp="Kontrollkästchen" Wert="4"></td>
                    <td>Schwimmen</td>
                </tr>
                <tr>
                    <td><Eingabetyp="Kontrollkästchen" Wert="5"></td>
                    Radfahren
                </tr>
            </tbody>
        </Tabelle>
    </div>

    <Skript>
        var alle = document.querySelector('#cbAll');
        var Sport = document.querySelector('#tb').querySelectorAll('Eingabe');

        // Klickereignis an die Schaltfläche „Alles auswählen“ binden all.onclick = function() {
            console.log(alle.geprüft);
            für (var i = 0; i < Sport.Länge; i++) {
                sport[i].checked = alle.checked;
            }
        }

        // Klickereignisse an jedes kleine Kontrollkästchen binden for (var i = 0; i < sports.length; i++) {
            sport[i].onclick = funktion() {
                // Steuern, ob die Schaltfläche „Alles auswählen“ ausgewählt ist var flag = true;
                // Bei jedem Anklicken eines Kästchens prüfen, ob alle Kontrollkästchen aktiviert sind (var i = 0; i < sports.length; i++) {
                    wenn (!sports[i].checked) {
                        Flagge = falsch;
                        break; // Solange ein kleines Kontrollkästchen nicht ausgewählt ist, ist die Schaltfläche „Alles auswählen“ nicht ausgewählt und die Schleife kann übersprungen werden. Die folgenden kleinen Kontrollkästchen müssen nicht erneut beurteilt werden}
                }
                alle.geprüft = Flagge;
            }
        }
    </Skript>
</body>

</html>

Seiteneffekt:

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

<<: Mehrere Möglichkeiten zum Verbinden von Tabellen in MySQL

>>: Detaillierte Erläuterung zur Verwendung von Nginx + Consul + Upsync zum Erreichen eines dynamischen Lastausgleichs

CentOS7-Installations-GUI-Schnittstelle und Implementierung der Remote-Verbindung

JavaScript zum Implementieren der Auswahl oder Stornierung von Kontrollkästchen

Umsetzungsideen

Codebeispiel

CentOS7-Installations-GUI-Schnittstelle und Implementierung der Remote-Verbindung

Verwenden von Vue zum Implementieren einer Timerfunktion

Vue3.0 implementiert die Kapselung des Dropdown-Menüs

Detaillierte Schritte zur Implementierung der Timeout-Statusüberwachung in Apache FlinkCEP

Zusammenfassung der Unterschiede zwischen globalen Objekten in Node.js und Browsern

Detaillierte Erklärung des Befehls mkdir beim Linux-Lernen

Beispiele für die Erstellung und Verwendung von MySQL-Triggern

Docker Link realisiert die Containerverbindung

Der Unterschied zwischen method=post/get in Form

JavaScript implementiert einfache Datumseffekte

Artikel empfehlen

Eine Methode zum Verbergen von Prozessen unter Linux und die dabei auftretenden Fallstricke

Analyse des Uniapp-Einsteiger-NVUE-Klettergrubenrekords

Miniprogramm zur Implementierung der Token-Generierung und -Verifizierung

Über Tomcat kombiniert mit Atomikos zur Implementierung von JTA

Detailliertes Tutorial zur Installation von MySQL 8.0.22 auf Redhat 7.3 (binäre Installation)

Detaillierte Erklärung langer Transaktionsbeispiele in MySQL

Detaillierte Erklärung der Kontrolle des Zugriffsvolumens durch Nginx

Analyse des Prinzips und der Funktion der MySQL-Datenbank-Master-Slave-Replikation

Lösung für das Problem, dass Emoji-Ausdrücke nicht in MySQL eingefügt werden können

Detaillierte Erläuterung der Docker Swarm-Dienstorchestrierungsbefehle

mysql: [FEHLER] unbekannte Option '--skip-grant-tables'

Das praktische Gitlab-Tutorial verwendet Git Config für zugehörige Konfigurationsvorgänge

Geben Sie zwei Zahlen in HTML ein, um Additions-, Subtraktions-, Multiplikations- und Divisionsfunktionen zu realisieren

Tutorial zur Installation des Nvidia-Grafikkartentreibers in Ubuntu 18.04 (mit Bildern und Text)

So implementieren Sie Property Hijacking mit JavaScript defineProperty