Überprüfen Sie, ob das Kontrollkästchen mit JavaScript überprüft wird

Das Kontrollkästchen ist ein HTML -Eingangstyp, der als Auswahlkästchen fungiert. Es wird zur Auswahl oder Deaktivierung einer bestimmten Option verwendet. Kontrollkästchen werden häufig verwendet, um die Besucher mit Webseiten in Kontakt zu treten und häufig Daten in ein Backend zu veröffentlichen, indem sie das Kontrollkästchen überprüft, das für eine bestimmte Bedingung gilt.

Dieses Handbuch zeigt die Technik, um zu überprüfen, ob das Kontrollkästchen aktiviert ist oder nicht.

Überprüfen Sie, ob das Kontrollkästchen mit JavaScript überprüft wird?

Um festzustellen, ob das Kontrollkästchen aktiviert ist, verwenden Sie die “überprüft" Eigentum. Wie wir wissen, enthält jedes Element einige Merkmale, mit denen JavaScript es auf bestimmte Weise steuern kann, und die geprüfte Eigenschaft des Kontrollkästchens ist eine davon davon. Die geprüfte Eigenschaft gibt den booleschen Wert true oder falsch, wenn ein Kontrollkästchen ausgewählt ist.

Beispiel 1: Verwenden von Onclick () -Ereignissen zum Überprüfen, ob das Kontrollkästchen aktiviert ist
Wir erstellen zuerst ein Kontrollkästchen an, das das anhängt "Onclick ()"Ereignis, das die benutzerdefinierte" aufgerufen wird "BoxChecked ()Überprüfen Sie, ob das Kontrollkästchen aktiviert ist oder nicht:

Überprüfen Sie das Kontrollkästchen, um die Bedingungen zu akzeptieren:

Ich akzeptiere alle Allgemeinen Geschäftsbedingungen.

In der JavaScript -Datei definieren wir eine Funktion namens “BoxChecked ()”, Das zuerst die ID des Kontrollkästchens mit der“ abrufen wirdGetElementById ()Methode und dann die überprüfte Eigenschaft so anwenden, dass der überprüfte zurückgegebene Wert auf “festgelegt wird“WAHR”Wenn es wie überprüft markiert ist. Dann wird eine Warnung mit der Nachricht angezeigt. “Das Kontrollkästchen wird überprüft! Danke für die Annahme:”:

Funktion BoxChecked ()
var CheckBox = Dokument.getElementById ("Kontrollkästchen");
if (Kontrollkästchen.geprüft == true)
ALERT ("Das Kontrollkästchen wird überprüft! Danke für die Annahme:");

Die entsprechende Ausgabe ist unten dargestellt:

Beispiel 2: Verwenden der addEventListener () -Methode zum Überprüfen, ob das Kontrollkästchen aktiviert ist
Hier erstellen wir ein Kontrollkästchen ohne Onclick () -Event (). Dann werden wir einen Absatz hinzufügen, und seine Anzeige ist als "festgelegt"keinerBis das Kontrollkästchen nicht überprüft ist. Wenn das Kontrollkästchen als überprüft markiert wird, wird der hinzugefügte Text in grüner Farbe angezeigt:

Ich akzeptiere alle Allgemeinen Geschäftsbedingungen.

Überprüft!

Sie können auch überprüfen. Hier verwenden wir eine andere Methode namens “AddEventListener ()" mit dem "QuerySelector ()Methode mithilfe der Checkbox -Eigenschaft der Checkbox. Dies funktioniert so, dass die Methode querySelector () zuerst das erste Element ausgewählt wird, das mit der hinzugefügten ID übereinstimmt, und dann die Methode addEventListener () assoziiert die “die“ die “assoziieren"klickenEreignis mit:

var text = dokument.GetElementById ("Text");
dokumentieren.QuerySelector ('#Kontrollkästchen').AddEventListener ('Click', (Ereignis) =>
if (Ereignis.Ziel.geprüft)
Text.Stil.display = "block";

)

Es ist ersichtlich, dass der hinzugefügte Inhalt in grüner Farbe angezeigt wird, wenn das Kontrollkästchen markiert ist:

Alles, was Sie wissen müssen, um festzustellen, ob ein Kontrollkästchen markiert ist oder nicht, wurde Ihnen zur Verfügung gestellt.

Abschluss

Um festzustellen, ob das Kontrollkästchen überprüft wird, verwenden Sie die Kontrollkästchen "überprüft" Eigentum. Die geprüfte Eigenschaft gibt einen booleschen Wert true aus, wenn sie überprüft wird. sonst gibt es falsch. Für die Überprüfung können Sie zwei verschiedene Verfahren verwenden. Eines ist das Onclick () -Ereignis und der andere ist addEventListener () -Methode. In diesem Handbuch haben wir das Verfahren beschrieben, um zu überprüfen, ob das Kontrollkästchen JavaScript überprüft oder nicht.