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

Beispielcode des Spread-Operators und seiner Anwendung in JavaScript

Der Spread-Operator ermöglicht die Erweiterung ei...

So überprüfen Sie die Speichernutzung unter Linux

Bei der Behebung von Systemproblemen, Anwendungsv...

Apropos ContentType(s) von image/x-png

Dies führte auch dazu, dass PNG-Dateien nicht hoch...

So deklarieren Sie einen Cursor in MySQL

So deklarieren Sie einen Cursor in MySQL: 1. Vari...

So vereinfachen Sie Redux mit Redux Toolkit

Inhaltsverzeichnis Probleme, die Redux Toolkit lö...

Teilen Sie 20 hervorragende Beispiele für Webformular-Design

Sophie Hardach Kai von Clyde Quay 37 Ost Seifenkis...

Inspirierende Designbeispiele für glänzendes und schimmerndes Website-Design

Diese Sammlung zeigt eine Reihe herausragender und...

So speichern Sie Text und Bilder in MySQL

Große Textdatentypen in Oracle Clob-Langtexttyp (...

html Option deaktivieren auswählen auswählen deaktivieren Option Beispiel

Code kopieren Der Code lautet wie folgt: <Ausw...

Detailliertes Tutorial zur Installation von ffmpeg unter Linux

1. Installieren Sie ffmpeg unter Centos Linux 1. ...