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

Eine Codezeile löst verschiedene IE-Kompatibilitätsprobleme (IE6-IE10)

Ajax löst domänenübergreifende Probleme durch Festlegen eines CORS-Antwortheaders, um eine domänenübergreifende Fallstudie zu erreichen

Artikel

JavaScript zum Implementieren der Auswahl oder Stornierung von Kontrollkästchen

Umsetzungsideen

Codebeispiel

Eine Codezeile löst verschiedene IE-Kompatibilitätsprobleme (IE6-IE10)

Detaillierte Schritte zur vollständigen Deinstallation von MySQL 5.7

Einführung in die neuen Funktionen von ECMAscript

Schritte für den Exit-Fehlercode des Docker-Containers

Ajax löst domänenübergreifende Probleme durch Festlegen eines CORS-Antwortheaders, um eine domänenübergreifende Fallstudie zu erreichen

Einige Fragen zu Hyperlinks

Einführung und Anwendungsbeispiele von ref und $refs in Vue

So implementieren Sie Linux Deepin, um redundante Kernel zu löschen

Detaillierte Erklärung zur Synchronisierung von Daten von MySQL mit Elasticsearch

So verwenden Sie die Clipboard-API in JS

Artikel empfehlen

Einige Indikatoren für exzellentes Web-Frontend-Design

Grafisches Tutorial zur Installation und Konfiguration der MySQL 8.0.16 Win10-Zip-Version

Zusammenfassung der Bereitstellung des Tomcat-Clusters und des Nginx-Lastausgleichs basierend auf Docker

Detaillierte Erklärung zum Datenaustausch zwischen Vue-Komponenten

Tutorial zu HTML-Tabellen-Tags (36): Hintergrundfarbattribut für Tabellenkopfzeilen BGCOLOR

Detaillierte Beispiele zur Verwendung der Box-Shadow-Eigenschaft in CSS3

Ubuntu 18.04 Ein-Klick-Upgrade aller Python-Pakete von Drittanbietern und Installation von Python-Paketen

Beispiele für JavaScript-Entschüttelungen und Drosselung

So konfigurieren Sie MySQL auf einem Ubuntu-Server und implementieren eine Remote-Verbindung

Methoden zum lokalen Sichern von Windows Server-Dateien, Lösungen zum Sichern von Windows Server-Daten

Detaillierte Erläuterung des Nginx-Forward-Proxys und des Reverse-Proxys

So führen Sie eine reibungslose if-Beurteilung in js durch

Implementierung der durch Kommas getrennten MySQL-Split-Funktion

Verwenden Sie Prometheus, um den verbleibenden verfügbaren Prozentsatz der MySQL-Autoinkrement-Primärschlüssel zu zählen

Erfahren Sie mehr über die Verwendung regulärer Ausdrücke in JavaScript