In diesem Artikel wird das Verfahren zum Aktivieren und Deaktivieren des Kontrollkästchens mithilfe von JavaScript beschrieben.
Wie aktiviere/deaktiviere ich das Kontrollkästchen mit JavaScript?
Um die Kontrollkästchen in JavaScript zu aktivieren oder zu deaktivieren, verwenden Sie das „ überprüft ” Attribut. Holen Sie sich zuerst die Referenz des HTML-Elements „ Kontrollkästchen ” mit Hilfe des zugewiesenen “ Ich würde ' Verwendung der ' getElementById() “-Methode und wenden Sie dann die „ überprüft ” Eigentum auf seinen Wert.
Beispiel 1: Aktivieren/deaktivieren Sie das einzelne Kontrollkästchen
Erstellen Sie zunächst eine HTML-Datei mit den folgenden Codezeilen:
< h3 > Klicken Sie auf Schaltflächen, um das Kontrollkästchen zu aktivieren oder zu deaktivieren h3 >
< Eingabetyp = 'Kontrollkästchen' Ich würde = 'Kontrollkästchen' > Stimmen Sie den Bedingungen zu < Br >< Br >
< Schaltflächentyp = 'Taste' anklicken = 'überprüfen()' > Ja Taste >
< Schaltflächentyp = 'Taste' anklicken = 'Häkchen entfernen ()' > Nö Taste >
Im obigen Code:
- Erstellen Sie ein Kontrollkästchen mit der ID „ Kontrollkästchen ” das verwendet wird, um auf das Element zuzugreifen “ Kontrollkästchen “, um Aktionen auszuführen.
- Erstellen Sie zwei Schaltflächen, “ Ja ' und ' Nö “, um das Kontrollkästchen zu aktivieren oder zu deaktivieren, das die Funktion auslöst „ überprüfen() ' und ' deaktivieren() ” bzw. auf das Click-Event.
Nach dem Ausführen des obigen Codes sieht die Ausgabe wie folgt aus:
Definieren Sie als Nächstes die Funktionen zum Ausführen von Aktionen für das Kontrollkästchen in der JavaScript-Datei oder dem Tag. Um das Kontrollkästchen zu aktivieren, verwenden Sie die folgenden Codezeilen:
Funktion überprüfen ( ) {
eingeben lassen = dokumentieren. getElementById ( 'Kontrollkästchen' ) ;
Eingang. überprüft = Stimmt ;
}
Im obigen Code:
- Definiere eine Funktion “ überprüfen() “, das den Klick auf die Schaltfläche auslöst, um das Kontrollkästchen zu aktivieren.
- Rufen Sie im Hauptteil der Funktion die Referenz des Kontrollkästchens mit seiner ID ab. Kontrollkästchen “ mit Hilfe des „ getElementById() ” Methode und speichere sie in einer Variablen “ Eingang “.
- Aktivieren Sie das Kontrollkästchen, indem Sie das „ überprüft ' Eigentum ' Stimmt “.
Um das Kontrollkästchen zu deaktivieren, klicken Sie auf „ Nö ” verwenden Sie den unten angegebenen Code:
Funktion deaktivieren ( ) {eingeben lassen = dokumentieren. getElementById ( 'Kontrollkästchen' ) ;
Eingang. überprüft = FALSCH ;
}
Das obige Code-Snippet:
- Definiere eine Funktion “ deaktivieren() “, der den Schaltflächenklick auslöst, um das Kontrollkästchen zu deaktivieren.
- Rufen Sie im Hauptteil der Funktion die Referenz des Kontrollkästchens mit seiner ID ab. Kontrollkästchen “ mit Hilfe des „ getElementById() ” Methode und speichere sie in einer Variablen “ Eingang “.
- Deaktivieren Sie das Kontrollkästchen, indem Sie das „ überprüft ' Eigentum ' FALSCH “.
Definieren Sie zuletzt eine Funktion, um das Kontrollkästchen standardmäßig beim Laden der Seite zu deaktivieren, indem Sie das „ window.onload ' Veranstaltung:
Fenster. laden = Funktion ( ) {Fenster. addEventListener ( 'Belastung' , überprüfen , FALSCH ) ;
}
Ausgabe
Die Ausgabe bedeutet, dass das Kontrollkästchen beim Klicken auf die Schaltflächen erfolgreich aktiviert und deaktiviert wurde.
Beispiel 2: Mehrere Kontrollkästchen aktivieren/deaktivieren
Sehen wir uns ein Beispiel an, wie Sie alle Kontrollkästchen gleichzeitig aktivieren oder deaktivieren.
Erstellen Sie zuerst eine HTML-Datei und erstellen Sie dann mehrere Kontrollkästchen und eine Schaltfläche mit der ID „ Umschalten “, das das Kontrollkästchen zum Aktivieren oder Deaktivieren umschaltet:
< h3 > Klicken Sie auf die Schaltfläche , um alle Kontrollkästchen zu aktivieren oder zu deaktivieren h3 >< Eingabetyp = 'Kontrollkästchen' Klasse = 'Kontrollkästchen' > Aktivieren oder deaktivieren Sie mich < Br >
< Eingabetyp = 'Kontrollkästchen' Klasse = 'Kontrollkästchen' > Aktivieren oder deaktivieren Sie mich < Br >
< Eingabetyp = 'Kontrollkästchen' Klasse = 'Kontrollkästchen' > Aktivieren oder deaktivieren Sie mich < Br >
< Eingabetyp = 'Kontrollkästchen' Klasse = 'Kontrollkästchen' > Aktivieren oder deaktivieren Sie mich < Br >
< Eingabetyp = 'Kontrollkästchen' Klasse = 'Kontrollkästchen' > Aktivieren oder deaktivieren Sie mich < Br >< Br >
< Eingabetyp = 'Taste' Ich würde = 'Umschalten' Wert = 'Klicken, um die Kontrollkästchen umzuschalten' >
Die entsprechende Ausgabe lautet:
Fügen Sie danach in einer JavaScript-Datei oder einem