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

Detaillierte Erläuterung der Reihenfolge der MySQL-Abfrageergebnisse gemäß der Reihenfolge der ID in in ()

Docker Compose stellt ein SpringBoot-Projekt bereit, um eine Verbindung zu MySQL herzustellen, und die dabei auftretenden Fallstricke

Zuvor haben wir Docker verwendet, um das SpringBo...

JavaScript zum Implementieren der Auswahl oder Stornierung von Kontrollkästchen

Umsetzungsideen

Codebeispiel

Detaillierte Erläuterung der Reihenfolge der MySQL-Abfrageergebnisse gemäß der Reihenfolge der ID in in ()

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

display:grid in CSS3, eine Einführung in das Rasterlayout

Gründe und Lösungen für die Auswahl des falschen Index durch MySQL

Beispiele für die Verwendung von Docker und Docker-Compose

So installieren Sie die Yum-Quelle und laden die Befehle rz und sz unter CentOS7 hoch und herunter (mit Bildern)

50 wunderschöne FLASH-Website-Designbeispiele

So zeigen Sie die Erstellungszeit von Dateien in Linux an

So verbinden Sie Xshell5 mit Linux in einer virtuellen Maschine und beheben den Fehler

Implementierung der automatischen Vervollständigung von Docker-Befehlen

Artikel empfehlen

Wie werden Vue-Komponenten analysiert und gerendert?

So sichern Sie das Skript für Linux-Server automatisch (MySQL, Sicherung von Anhängen)

Codebeispiele für MySQL-Batchoperationsanweisungen „Select“, „Insert“ und „Update“

Einige Tipps zur richtigen Verwendung des HTML-Titelattributs

MySQL-Serie 9 MySQL-Abfrage-Cache und -Index

Häufig verwendete höherwertige Funktionen und umfassende Beispiele in Vue

Lösung für den ineffektiven globalen Stil der benutzerdefinierten Miniprogrammkomponente

Implementierung des React-Konfigurations-Subroutings

Docker verwendet Git, um den detaillierten Prozess der Jenkins-Release- und Testprojekte zu implementieren

Beispielcode zur Implementierung der olympischen Ringe mit reinem HTML+CSS

Docker Compose stellt ein SpringBoot-Projekt bereit, um eine Verbindung zu MySQL herzustellen, und die dabei auftretenden Fallstricke

Detaillierte Erläuterung des MySQL-Mechanismus zur gemeinsamen Abfrageoptimierung

Code zum Anzeigen des Inhalts eines TXT-Buchs auf einer Webseite

Verwenden von vue3 + threejs, um das Beispiel für Big Wave-Spezialeffekte der offiziellen iView-Website zu imitieren

Der Prozess zum Erstellen eines Jenkins-Projekts unter Linux (am Beispiel von CentOS 7)