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

Lösung für die Nichterreichbarkeit des Tencent Cloud Server Tomcat-Ports

HTML implementiert die Funktion zum automatischen Aktualisieren oder Öffnen eines neuen Fensters für den URL-Link des Elements href

Manchmal möchten wir eine solche Funktion impleme...

JavaScript zum Implementieren der Auswahl oder Stornierung von Kontrollkästchen

Umsetzungsideen

Codebeispiel

Lösung für die Nichterreichbarkeit des Tencent Cloud Server Tomcat-Ports

Konzepte und Methoden für Server-Stresstests (TPS/Parallelität)

Detaillierte Erläuterung des Aufbaus und der Verwendung des Docker Private Warehouse

Detaillierte Erklärung der neuen CSS-Eigenschaft display:box

Einführung und Verwendung der Angular-Pipeline PIPE

Gründe und Lösungen für die Aufforderung zum Speichern der Aktion nach dem Hochladen von Dateien im Formular

Schritte für IDEA zur Integration von Docker zur Realisierung einer Remote-Bereitstellung

So verbessern Sie die Startgeschwindigkeit von Idea und beheben Probleme mit verstümmelten Zeichen im Tomcat-Protokoll

Lösung für das Problem der großen Schriftgröße auf iPhone-Geräten in WAP-Seiten

js implementiert eine auf Canvas basierende Uhrkomponente

Artikel empfehlen

MySQL verwendet SQL-Anweisungen zum Ändern von Tabellennamen

Implementierung von HTTP- und HTTPS-Diensten mit Nginx-Reverse-Proxy für mehrere Domänennamen

CSS-Implementierungscode zum Zeichnen von Dreiecken (Rahmenmethode)

Ideen und Praxis einer mehrsprachigen Lösung für ein Vue.js-Frontend-Projekt

Einige Tipps zur umfassenden Optimierung, um die Zugriffsgeschwindigkeit von Websites zu verbessern

So löschen Sie die Validierungsaufforderung bei der Elementformularvalidierung

Detaillierte Erläuterung der kostenlosen AWS-Serveranwendung und des Tutorials zur Einrichtung eines Netzwerkproxys

So implementieren Sie eine MySQL-Datenbanksicherung in Golang

Detaillierte Schritte zur Installation von MinIO auf Docker

Docker-Installation Tomcat Dubbo-Admin-Instanz-Kenntnisse

Zwei Möglichkeiten zur Installation von Python3 auf Linux-Servern

Detaillierte Erläuterung der Nginx-Installation, SSL-Konfiguration und allgemeinen Befehle unter Centos7.x

Beispiel für das Hinzufügen eines Musikvideos zu einer HTML-Seite

So implementieren Sie geplante MySQL-Aufgaben unter Linux

HTML implementiert die Funktion zum automatischen Aktualisieren oder Öffnen eines neuen Fensters für den URL-Link des Elements href