JavaScript Forms & Checkbox

Sollen in einem Form vorgegebene Werte zur Auswahl gestellt werden, so kann dies mit Hilfe von Checkbox-Elementen geschehen. Bei der Checkbox kann der Benutzer – anders als bei Radio-Buttons, wo aus einer Gruppe von Optionen nur eine einzige ausgewählt werden kann – mehrere Elemente gleichzeitig auswählen. Zum Zugriff auf Checkbox-Elemente in einem Formular hat man grundsätzlich zwei Möglichkeiten.

Die erste besteht darin, dass der Name einer Gruppe von Checkboxen zum Ansprechen verwendet wird. Hierbei kann mit der Length-Eigenschaft die Anzahl der Elemente gleichen Namens abgefragt werden. Zur Gruppierung von Checkboxen wird bei der Definition der Checkbox-Eingabeelemente jeder einer Gruppe zugehörigen Checkbox der selbe Name zugewiesen. Über diesen Namen kann nun auf die Checkboxen, die als Elementknoten in einem Array gespeichert sind, zugegriffen werden.

Eine weitere Möglichkeit besteht mittels Elements-Objekt. Hier kann jedes Element im Formular durchgegangen werden und über dessen Typ- und Namenseigenschaften identifiziert werden. Das Elements-Objekt ist ein Kindobjekt des Form-Objekts, welches durch das Document Object angesprochen werden kann.

JavaScript Checkbox Beispiel 1: Checked - Zugriff auf den Status

Im ersten Beispiel zu Checkboxen wird die erstgenannte Zugriffsart verwendet. Die Function checkbox_checked_alert() testet die Stati der Checkboxen mit den Namen nutzungsart. Auf die einzelnen Checkbox-Elemente wird mit dem Vektoroperator in einer For-Schleife zugegriffen, wobei die Anzahl der Elemente mit dem Namen nutzungsart über die Length-Eigenschaft ermittelt wird.

In einem String werden Informationen zum Checked-Status und die Value-Eigenschaft der im Formular enthaltenen Checkbox-Elemente mit Namen nutzungsart gespeichert. Die auf diese Weise gesammelten Informationen werden am Ende der Funktion in einer Alert-Box ausgegeben.

<form name="formular">
  Nutzung des Computers:<br>
  <input type="checkbox" name="nutzungsart" value="arbeiten"> Arbeit<br>
  <input type="checkbox" name="nutzungsart" value="multimedia"> Audio / Video<br>
  <input type="checkbox" name="nutzungsart" value="spielen"> Spielen<br>
  <input type="button" onclick="checkbox_checked_alert ()" value="Status abfragen">
  <script language="javascript" type="text/javascript">
  <!-- // JavaScript-Bereich für ältere Browser auskommentieren
  // Funktion prüft die Checkbox-Elemente der Form auf ihren Status und
  // gibt die in einem String zusammengefassten Informationen in einer
  // Alert-Box aus.
  function checkbox_checked_alert () {
    // Zeichenkette für die Ergebnisausgabe initialisieren
    var ergebnisstring = '';

    // Jedes Element im Formular durchgehen, welches den Namen ergebnis trägt.
    for (var i = 0; i < document.formular.nutzungsart.length; i++)
      // Wenn das aktuelle Eingabeelement eine Checkbox ist...
      if (document.formular.nutzungsart[i].type == 'checkbox') {
        // Ergebnisstring um Status der Checkbox und
        // den im Element gespeicherten Value erweitern
        ergebnisstring += 'nutzungsart[' + i + ']: Checked=' +
              document.formular.nutzungsart[i].checked +
              '; Value=' +
              document.formular.nutzungsart[i].value +
              '\n';
      }
    // Ist die Zeichenkette zur Speicherung des Ergebnisses leer?
    if (ergebnisstring.length == 0)
      // Ausgabe eines Hinweises, für den Fall dass keine Checkboxen
      // in der Form waren
      alert ('Keine Checkboxelemente im Formular enthalten!');
    else
      // Ausgabe der zusammengestellten Liste mit den Checkbox-Stati
      alert (ergebnisstring);
  }
  // -->
  </script>
</form>
Nutzung des Computers:
Arbeit
Audio / Video
Spielen

JavaScript Checkbox Beispiel 2: Value - Werte von Checkbox-Elementen

Im zweiten Beispiel zur Checkbox werden die Elemente über das Elements-Objekt des Form-Objekts adressiert. Die hier implementierte Funktion checkbox_values() sammelt die Value-Werte der aktivierten Checkbox-Elemente in einem Array und gibt dieses als Rückgabewert zurück. Ob ein Checkbox-Element in der Gruppe aktiviert ist, wird in einer If-Anweisung abgefragt, indem die Checked-Eigenschaft abgefragt wird – darüber hinaus wird im unteren Beispiel über die Type-Eigenschaft geprüft, ob es sich beim angesprochenen HTML-Element auch wirklich um eine Checkbox handelt.

Per Button – genauer gesagt über das onClick-Event des Buttons, welches der Benutzer durch Anklicken des Buttons auslöst – wird diese Funktion gestartet (zu Events siehe auch Event). Der von der Funktion gelieferte Rückgabewert wird über eine Alert-Box, einer der durch Window definierten Dialogboxen, ausgegeben.

<form name="formular2">
  Lieblingstier:<br>
  <input type="checkbox" name="tier" value="hund"> Hund<br>
  <input type="checkbox" name="tier" value="katze"> Katze<br>
  <input type="checkbox" name="tier" value="maus"> Maus<br>
  <input type="button" onclick="alert ('Auswahl: ' + checkbox_values ())" value="Werteliste ausgeben">
  <script language="javascript" type="text/javascript">
  <!-- // JavaScript-Bereich für ältere Browser auskommentieren
  // Folgende Funktion liest die Werte (Eigenschaft values) der aktivierten
  // Checkbox-Elemente des Formulars aus und gibt diese in Form eines Arrays
  // zurück.
  function checkbox_values () {
    // Array zur Speicherung der Values der aktivierten Checkbox-Elemente
    var varray = new Array ();
    // Zähler, der die aktuelle Position im Ergebnis-Array speichert
    var valcount = 0;

    // Alle Elemente des Formulars durchlaufen
    for (var i = 0; i < document.formular2.elements.length; i++)
      // Handelt es sich beim zu bearbeitenden INPUT-Element um ein
      // Element vom Typ checkbox und ist diese Aktiviert (checked)?
      if (document.formular2.elements[i].type == 'checkbox' &&
          document.formular2.elements[i].checked)
        // Value-Eigenschaft der Checkbox in das Ergebnis-Array
        // einfügen.
        varray[valcount++] = document.formular2.elements[i].value;
    // Ermittelte Values als Return-Wert zurückgeben
    return varray;
  }
  // -->
  </script>
</form>
Lieblingstier:
Hund
Katze
Maus

Beachten Sie bitte, dass Sie den JavaScript Source Code auch an Stellen ausserhalb des Form-Tags notieren können. Werden, wie in diesen Beispielen, Funktionen verwendet, so ist eine Ausgliederung des Codes in eine JS-Datei eine mögliche Option.



¬ Insolvenzrecht