JavaScript - Auf Checkboxen zugreifen

Checkbox S.611 Das umfassende Referenzwerk

Ein graphisches Kontrollkästchen

Überblick

  • form.checkbox_name
  • form.elements[i]

Wenn ein Formular eine Gruppe von gleichnamigen Kontrollkästchen enthält, werden diese in ein Array gesetzt und können folgendermaßen referenziert werden:

  • form.checkbox_name[i]
  • form.checkbox_name.length

Eigenschaften

Checkbox erbt Eigenschaften von Input und HTML-Element und definiert oder überschreibt folgende Eigenschaften:

  • checked
  • defaultChecked
  • value
checked

Ein les- und schreibbarer Boolescher Eigenschaft. Wenn das Kontrollkästchen aktiviert ist, ist die checked-Eigenschaft true; andernfalls ist sie false.
Wenn die checked-Eigenschaft auf true gesetzt wird, erscheint das Kontrollkästchen aktiviert, der oncklick-Event-Handler wird aber nicht aufgerufen. Bei false wird das Kontrollkästchen deaktiviert.

defaultChecked

Eine schreibgeschützte Boolesche-Eigenschaft, die den Anfangszustand des Kontrollkästchens angibt. Sie ist true wenn das Kontrollkästchen ursprünglich aktiviert ist, also wenn im input-HTML-Tag das Attribut checked angegeben ist. Fehlt dieses Attribut ist das Kästchen anfangs deaktiviert.

value

Eine les- und schreibbare String-Eigenschaft, die angibt, welcher Text dem Webserver übergeben wird, wenn das Kontrollkästchen bei der Formularübermittlung aktiviert ist.
Der Anfangswert von value wird durch das value-Attribut des HTML-Tags input festgelegt. Wenn kein value-Attribut angegeben ist, ist der Standard-String für value "on".

Methoden

Checkbox erbt die Methoden von Input und HTML-Element

Event-Handler

Checkbox erbt Event-Handler von Input und HTML-Element und definiert oder überschreibt den folgenden Event-Handler:

  • onclick

    Wird aufgerufen, wenn das Kontrollkästchen angeklickt wird.

Beispiel1: Auf Checkboxen zugreifen

<script type="text/javascript">

function zeigeDaten(f) {

var ausgabe = "Textfeld: " + f.elements["Benutzername"].value;

ausgabe += "\nPasswortfeld: " + f.elements["Passwort"].value;

ausgabe += "\nMehrzeiliges Textfeld: " + f.elements["Kommentar"].value;

//auf Checkbox zugreifen

ausgabe += "\nCheckbox: AGB ";

if (f.elements["AGB"].checked) {

ausgabe += "akzeptiert";

} else {

ausgabe += "nicht akzeptiert";

}

alert(ausgabe);

}

</script>

Da es sich um eine Abfrage von true oder false handelt kann der Bedingungsoperator ?: verwendet werden. Das ergibt eine kompaktere Schreibweise.

Beispiel2: Mit Bedingungsoperator

<script type="text/javascript">

function zeigeDaten(f) {

var ausgabe = "Textfeld: " + f.elements["Benutzername"].value;

ausgabe += "\nPasswortfeld: " + f.elements["Passwort"].value;

ausgabe += "\nMehrzeiliges Textfeld: " + f.elements["Kommentar"].value;

//auf Checkbox zugreifen

ausgabe += "\nCheckbox: AGB ";

// tenär Operator

ausgabe += (f.elements["AGB"].checked) ? "akzeptiert" : "nicht akzeptiert";

alert(ausgabe);

}

</script>

Formular zur Registrierung:

Benutzername:

Passwort:

Geschlecht: weiblich    männlich

Land:

Interessen:

Kommentar:

Ich akzeptiere die AGB

zurück