In diesem Artikel werden die Methoden zum Aktivieren und Deaktivieren aller Kontrollkästchen mit JavaScript demonstriert.
Wie aktiviere und deaktiviere ich alle Kontrollkästchen mit JavaScript?
Um alle Kontrollkästchen in JavaScript zu aktivieren und zu deaktivieren, können Sie Folgendes anwenden:
- „ document.getElementsByName ”-Methode mit Checkboxen
- „ document.getElementsByName ”-Methode mit Schaltflächen
Die genannten Ansätze werden nun nacheinander besprochen!
Methode 1: Aktivieren und deaktivieren Sie alle Kontrollkästchen in JavaScript mit der Methode „document.getElementsByName()“ mit „Checkboxes“
Das ' document.getElementsByName() “-Methode gibt die Elemente mit dem angegebenen Namen in ihren Argumenten zurück. Diese Methode wird angewendet, um den Wert jedes Kontrollkästchens mit Hilfe des übergebenen Namens abzurufen.
Lassen Sie uns das folgende Beispiel zur Demonstration durchgehen.
Beispiel
Zuerst wird der Eingabetyp angegeben als „ Kontrollkästchen “ und jedem Kontrollkästchen wird ein bestimmter Name und Wert zugewiesen:
< Eingabetyp = 'Kontrollkästchen' Name = 'nur' Wert = 'Python' > Python < Br />< Eingabetyp = 'Kontrollkästchen' Name = 'nur' Wert = 'Java' > Java < Br />
< Eingabetyp = 'Kontrollkästchen' Name = 'nur' Wert = 'JavaScript' > JavaScript < Br />
Fügen Sie nun ein zusätzliches Kontrollkästchen mit dem Wert „ Alle überprüfen “ und fügen Sie ein „ onclick() “ Ereignis mit diesem Kontrollkästchen, das so funktioniert, wenn das Kontrollkästchen angeklickt wird, das „ checkUnmarkiert ()“ Methode wird mit dem Objekt „ Dies “ als Argument:
< Eingabetyp = 'Kontrollkästchen' anklicken = 'checkUncheck(this)' /> Alle überprüfen < Br />
Definieren Sie danach eine Funktion mit dem Namen „ checkUncheck() “ in der JavaScript-Datei mit einer Variablen namens „ Kontrollkästchen “ als Argument. Greifen Sie nun auf die Kontrollkästchenwerte mit dem „ document.getElementsByName() “-Methode und platzieren Sie den Wert der „ Name ”-Attribut als Argument.
Wenden Sie abschließend ein „ zum “-Schleife, um alle Kontrollkästchenwerte zu durchlaufen und die „ überprüft ”-Eigenschaft, um sie alle als aktiviert zu markieren:
FunktionsprüfungHäkchen entfernen ( Kontrollkästchen ) {erhalten = dokumentieren. getElementsByName ( 'nur' ) ;
zum ( war in = 0 ; ich < erhalten. Länge ; ich ++ ) {
erhalten [ ich ] . überprüft = Kontrollkästchen. überprüft ; }
}
Wie Sie sehen können, wenn die „ Alle überprüfen ” Kontrollkästchen markiert ist, werden alle anderen Kontrollkästchen ebenfalls als aktiviert markiert:
Methode 2: Aktivieren und deaktivieren Sie alle Kontrollkästchen in JavaScript mit der Methode „document.getElementsByName()“ mit „Buttons“
Das ' document.getElementsByName() ”-Methode, wie in der vorherigen Methode besprochen, ruft die Elemente mit dem angegebenen Namen in ihren Argumenten ab. Es kann verwendet werden, um alle hinzugefügten Kontrollkästchen auf einer Webseite zu aktivieren oder zu deaktivieren.
Sehen Sie sich das folgende Beispiel zur Demonstration an.
Beispiel
Jetzt werden wir zwei Schaltflächen für die beiden „ Überprüft alle ' und ' Alle deaktivieren ” Funktionalitäten. Fügen Sie dann ein „ anklicken ” Ereignis mit beiden Schaltflächen, die separat auf die angegebenen Funktionen zugreifen:
< Eingabetyp = 'Taste' anklicken = 'überprüfen()' Wert = 'Überprüft alles' />< Eingabetyp = 'Taste' anklicken = 'unCheck()' Wert = 'Alles deaktivieren' />
Definieren Sie als Nächstes eine Funktion mit dem Namen „ überprüfen() “ und wenden Sie das „ document.getElementsByName “-Methode mit dem angegebenen Wert der „ Name ” Attribut. Wiederholen Sie dann die „ zum ” Schleifen Sie alle Kontrollkästchenwerte ab, die in der vorherigen Methode besprochen wurden.
Darüber hinaus wird beim Klicken auf die zugehörige Schaltfläche die „ überprüft ”-Eigenschaft markiert alle Kontrollkästchen und setzt den aktivierten Status als “ Stimmt “:
Funktionsprüfung ( ) {Ziege sein = dokumentieren. getElementsByName ( 'überprüfen' ) ;
zum ( war in = 0 ; ich < erhalten. Länge ; ich ++ ) {
erhalten [ ich ] . überprüft = Stimmt ; }
}
Definieren Sie als Nächstes eine Funktion mit dem Namen „ uncheck() “, und fügen Sie die umgekehrte Funktionalität hinzu, um die aktivierte Box-Eigenschaft als „ FALSCH “:
Funktion deaktivieren ( ) {Ziege sein = dokumentieren. getElementsByName ( 'überprüfen' ) ;
zum ( war in = 0 ; ich < erhalten. Länge ; ich ++ ) {
erhalten [ ich ] . überprüft = FALSCH ; }
}
Es kann in der Ausgabe sehen, dass die hinzugefügten Schaltflächen perfekt funktionieren:
Wir haben die einfachsten Methoden zum Aktivieren und Deaktivieren aller Kontrollkästchen mit JavaScript bereitgestellt.
Fazit
Verwenden Sie zum Aktivieren und Deaktivieren aller Kontrollkästchen mit JavaScript das „ document.getElementsByName() ” Methode mit “ Kontrollkästchen “, um ein Kontrollkästchen hinzuzufügen und auf die Funktion zuzugreifen, was dazu führt, dass die Kontrollkästchen aktiviert werden, oder wenden Sie dieselbe Methode mit „ Tasten ” um zwei separate Schaltflächen zum Aktivieren und Deaktivieren aller angegebenen Werte einzuschließen. In diesem Artikel wurden die Methoden zum Aktivieren und Deaktivieren aller Kontrollkästchen mit JavaScript erläutert.