JavaScript zum Erreichen eines vollständigen oder umgekehrten Auswahleffekts im Formular

JavaScript zum Erreichen eines vollständigen oder umgekehrten Auswahleffekts im Formular

In diesem Artikel wird der spezifische JavaScript-Code zur vollständigen oder umgekehrten Auswahl des Formulars zu Ihrer Information bereitgestellt. Der spezifische Inhalt ist wie folgt

Kontrollkästchen werden häufig in Formularen verwendet. Es ist auch sehr üblich, alle durch Kontrollkästchen erstellten Listen auszuwählen oder abzuwählen, z. B. die Produktliste in einem Einkaufswagen. Daher stellt dieser Artikel auch den Auswahleffekt dieser häufigen Funktion und ihre zugrunde liegenden Implementierungsideen und -codes vor, demonstriert und analysiert sie. Im Folgenden finden Sie den JS-Code:

<Skript>
        //Beispiel für das Auswählen oder Abwählen von allem in einem Formular: Hinweis: Wenn der Attributwert „checked“ eines Kontrollkästchens „true“ ist, ist es ausgewählt, und wenn er „false“ ist, ist es abgewählt var j_cbAll = document.getElementById('j_cbAll'); //Schaltfläche „Alles auswählen“ abrufen var j_tbs = document.getElementById('j_tb').getElementsByTagName('input'); //Alle Eingabe-Kontrollkästchen abrufen //Ereignisse registrieren //1. Ereignis der Schaltfläche „Alles auswählen“ j_cbAll.onclick = function () {
            // this.checked kann den Status des aktuellen Kontrollkästchens abrufen und einen Wert von true oder false zurückgeben
            für (var i = 0; i < j_tbs.length; i++) {
                j_tbs[i].checked = this.checked; // Setzen Sie den aktivierten Wert jedes Kontrollkästchens in tbody gleich dem aktivierten Wert der aktuellen Schaltfläche „Alles auswählen“, damit ihre Zustände konsistent sind}
        }
        // 2. Ereignisse der Kontrollkästchen in tbody: Wenn alle Kontrollkästchen unten ausgewählt sind, wird auch die Schaltfläche „Alle auswählen“ ausgewählt. Wenn mindestens eines nicht ausgewählt ist, wird auch die Schaltfläche „Alle auswählen“ deaktiviert. Hinweis: Jedes Mal, wenn ein Kontrollkästchen in tbody angeklickt wird, muss geprüft werden, ob alle Kontrollkästchen für (var i = 0; i < j_tbs.length; i++) { ausgewählt sind.
            j_tbs[i].onclick = Funktion () {
                // Flag wird verwendet, um zu steuern, ob die Schaltfläche „Alles auswählen“ ausgewählt ist. var flag = true;
                // Jedes Mal, wenn Sie das Kontrollkästchen unten anklicken, müssen Sie eine Schleife ausführen und prüfen, ob alle 4 Kontrollkästchen für (var i = 0; i < j_tbs.length; i++) { ausgewählt sind.
                    Konsole.log('---'+j_tbs[i].checked);
                    if (j_tbs[i].checked == false) { // Wenn eine Schaltfläche nicht ausgewählt ist, führe den internen Code aus, um den Flag-Wert auf „false“ zu ändern.
                        Flagge = falsch;
                        break; // Beenden Sie die innere For-Schleife. Dies kann die Ausführungseffizienz verbessern, da der Rest nicht beurteilt werden muss, solange einer nicht ausgewählt ist.}
                }
                j_cbAll.checked = flag; //Nachdem die Schleife beendet ist, setze den Flag-Wert auf die Schaltfläche „Alles auswählen“}
        }
</Skript>

Screenshot des Ausführungscodes:

Wenn Sie auf „Alles auswählen“ klicken: Klicken Sie erneut:

Wenn das folgende Kontrollkästchen aktiviert ist:

Hinweis: Wenn nicht alle vier Kontrollkästchen unten aktiviert sind, wird die Schaltfläche „Alles auswählen“ oben nicht ausgewählt.

Die Idee der internen JS-Implementierung ist hauptsächlich in zwei Teile unterteilt: Der erste Teil ist die Funktion der Schaltfläche „Alles auswählen“. Wenn sie ausgewählt ist, sind alle Kontrollkästchen darunter aktiviert = wahr. Hinweis: Dieser Wert ist der Schlüssel zur Implementierung dieser Funktion. Wenn die Schaltfläche „Alles auswählen“ nicht aktiviert ist, ist ihr aktivierter Wert falsch, sodass dieser Wert allen Unterkontrollfeldern darunter zugewiesen werden kann; der zweite Teil ist der Status der Schaltfläche „Alles auswählen“, der durch die Klickauswahlfunktion der Unterkontrollfelder darunter und deren Status bestimmt wird. Wenn alle der folgenden ausgewählt sind, muss auch die Schaltfläche „Alles auswählen“ ausgewählt sein. Wenn mindestens eines deaktiviert ist, ist auch die Schaltfläche „Alles auswählen“ deaktiviert. Hinweis: Bei jedem Klick auf ein Unterkontrollfeld muss beurteilt werden, ob alle Kontrollkästchen aktiviert sind. (Es wird empfohlen, die Codeanalyse zu kombinieren. Der Code enthält eine detaillierte Kommentaranalyse.)

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:
  • Beispiel für die Implementierung von Select All-, Deselect- und Delete-Operationen für Formularelemente mit js
  • ReactJS implementiert Einzelauswahl-, Mehrfachauswahl- und umgekehrte Auswahlbeispiele in Formularen

<<:  So implementieren Sie eine verschachtelte if-Methode in Nginx

>>:  Lösen Sie das Problem, dass MySQL 8.0 trotz korrekter Eingabe immer noch die Meldung „Zugriff verweigert“ anzeigt.

Artikel empfehlen

So starten und starten Sie nginx unter Linux neu

Nginx (Engine x) ist ein leistungsstarker HTTP- u...

Detaillierte Erklärung der Speicher-Engine in MySQL

Übersicht über die MySQL-Speicher-Engine Was ist ...

CSS zum Implementieren von QQ-Browserfunktionen

Code Wissenspunkte 1. Kombinieren Sie fullpage.js...

Die perfekte Lösung für das AutoFill-Problem in Google Chrome

In Google Chrome werden Sie nach der erfolgreiche...

Installation und Verwendung von TypeScript und grundlegende Datentypen

Der erste Schritt besteht darin, TypeScript globa...

Zentrieren des Formulars in HTML

Ich bin einmal auf eine Aufgabe gestoßen, bei der...

MySQL: Praktische Erfahrung mit der Verwendung der Insert-Anweisung

Inhaltsverzeichnis 1. Mehrere Syntaxen von Insert...

Eine kurze Erläuterung zum Anpassen der Hostdatei in Docker

Inhaltsverzeichnis 1. Befehl 2. docker-compose.ym...

Verbesserung der Aktualisierungsfunktion für Zen-Codierungsressourcen

Offizielle Website: http://code.google.com/p/zen-c...