Das Kontrollkästchen Onclick -Ereignisse in JavaScript

Das Kontrollkästchen ist ein HTML -Eingangselement, mit dem der Benutzer eine von mehreren Optionen auswählen kann. Wie bei HTML -Formularen gibt es ein Kontrollkästchen für Geschlecht, männlich oder weiblich. Oder manchmal müssen die Bedingungen genehmigt werden, bevor das Formular eingereicht wird. Der "ONCLICKDas Ereignis wird an das Kontrollkästchen beigefügt und wird ausgelöst oder ausgeführt, wenn ein Kontrollkästchen klickt.

In diesem Artikel wird das Checkbox Onclick -Ereignis in JavaScript demonstriert.

Das Kontrollkästchen Onclick -Ereignisse in JavaScript

Der "ONCLICK”Ist ein Ereignis, das ausgelöst wird, wenn der Benutzer das Kontrollkästchen überprüft. Das Onclick -Ereignis wird mit dem Kontrollkästchen angehängt von:

• Verwenden des Onclick -Attributs im HTML -Tag
• Anwenden einer Funktion auf das Onclick -Attribut eines HTML -Elements in JavaScript anwenden
• Explizit einen Ereignishörer auf die “hinzufügen“klicken" Fall

Lassen Sie uns alle diese einzeln verwenden.

Beispiel 1: Kontrollkästchen Onclick -Ereignis mit dem Onclick -Attribut im HTML -Tag mit dem Onclick -Attribut
Erstellen Sie ein Kontrollkästchen in einer HTML -Datei mit der ID “zustimmen"Und fügen Sie eine" an "ONCLICKEreignis mit IT, das die Funktion ausführt checkclickfunc () Geschrieben im JavaScript -Teil:

Onclick -Eigenschaft in HTML durch Aufrufen der JavaScript -Funktion

Vereinbaren Sie die Allgemeinen Geschäftsbedingungen

Verwenden Sie die folgenden Codezeilen in einer JavaScript -Datei:

Funktion checkclickfunc ()

var CheckBox = Dokument.GetElementById ('vereinbart');
if (Kontrollkästchen.geprüft == true)

Alert ("Kontrollkästchen wird geklickt");

Im obigen Code,

• Erstellen Sie die Funktion checkclickfunc () Das soll beim Klicken auf das Kontrollkästchen ausgeführt werden.
• Verwendung der "GetElementById ()"Methode, das Kontrollkästchen nach seiner ID abrufen"zustimmen”.
• Überprüfen Sie den Status des Kontrollkästchens mit der “überprüft”Attribut.
• Wenn es "WAHR", Zeigen Sie eine Warnmeldung"Das Kontrollkästchen wird geklickt”.

Ausgang

Beispiel 2: Kontrollkästchen Onclick -Ereignis durch Anwenden einer Funktion auf das Onclick -Attribut eines HTML -Elements in JavaScript
In diesem Beispiel wird JavaScript verwendet, um dem einen Wert zu geben ONCLICK Attribut des HTML -Elements und nicht im HTML -Tag.

Erstellen Sie ein Kontrollkästchen und weisen Sie eine ID zu, auf die später in JavaScript zugegriffen wird:

Kontrollkästchen Onclick mit JavaScript

Vereinbaren Sie die Allgemeinen Geschäftsbedingungen

Im folgenden Schritt wird auf das Kontrollkästchen mit seiner ID zugegriffen “.“zustimmen" und ein "ONCLICKDas Attribut wird damit verbunden. Auf das Kontrollkästchen -Klick wird die definierte Funktion ausgeführt und eine Warnmeldung wird angezeigt:

dokumentieren.GetElementById ("Vereinbar").Onclick = Funktion checkclickfunc ()
Alert ("Kontrollkästchen wird geklickt");

Die entsprechende Ausgabe ist:

Beispiel 3: Kontrollkästchen Onclick -Ereignis, indem Sie den Ereignislistener auf "Click" -Ereignis explizit hinzufügen
Hier wird das Checkbox Onclick -Ereignis mit dem JavaScript festgelegtAddEventListener ()" Methode:

Kontrollkästchen Onclick verwenden JavaScript über AddEventListener

Vereinbaren Sie die Allgemeinen Geschäftsbedingungen

Verwenden Sie in der JavaScript -Datei den angegebenen Code:

dokumentieren.GetElementById ("Vereinbar").AddEventListener ("Click", checkClickFunc);
Funktion checkclickfunc ()
Alert ("Kontrollkästchen wird geklickt");

Im obigen Code -Snippet,

• Abrufen Sie zuerst das Kontrollkästchen mit der ID ab und fügen Sie dann eine an "an"AddEventListener ()"Methode durch Übergabe eines"klicken"Ereignis und eine Funktion"checkclickfunc”Das wird im Kontrollkästchen -Klick aufgerufen.
• Eine Funktion definieren “checkclickfunc ()”, Die beim Klicken auf das Kontrollkästchen ausgelöst werden und eine Warnmeldung angezeigt werden:

Ausgang

Abschluss

Das Kontrollkästchen Onclick -Ereignisse sind Ereignisse, die ausgeführt werden, wenn ein Kontrollkästchen als "als" markiert "markiert istüberprüft”. Diese Ereignisse werden standardmäßig in einem Kontrollkästchen Element des HTML -Dokuments nicht angewendet. Daher muss der Benutzer die Ereignisse manuell hinzufügen, um bestimmte Funktionen auszuführen. Es gibt drei verschiedene Möglichkeiten zum Hinzufügen einer “ONCLICKEreignis und eine Aktion auf dieses Ereignis mit Hilfe von JavaScript ausführen. Dieser Artikel erläutert diese drei Methoden zusammen mit Beispielen.