JavaScript - Umgang mit Checkboxen

index Anfang rückwärts vorwärts runter
Das aufgelistete Beispiel demonstriert den Umgang mit Checkboxen. Das Formular hat den Namen demo bekommen, und das Ausgabefeld den Namen anzeige. Die Checkboxen müssen über document.demo.elements[0] bis document.demo.elements[3] angesprochen werden, da sie in diesem Beispiel gleiche Namen erhalten.

Beispiel ansehen

Querverweise zum Verständnis : [Einbindung in HTML] [Spezifikation Funktionen] [Spezifikation if-else-Unterscheidung] [Spezifikation for-Schleife] [Objektreferenz elements]

Im folgenden Quelltext sind wichtige Bereiche grün und Kommentare gelb markiert.
index Anfang rückwärts vorwärts hoch runter 
<html>

<head>
<title>
JavaScript - Beispiel
</title>

<script type="text/javascript"> <!-- Script-Bereich einleiten -->
<!--                           /* HTML-Kommentar fuer Browser ohne JavaScript */

function auswahl()
{
  var i,Text="";

   /* jede Checkbox abchecken und wenn ausgewaehlt auflisten : */
  for (i=0;i<4;i++)
    if (document.demo.elements[i].checked)
      Text=Text+document.demo.elements[i].value+"\n";

   /* Text im Ausgabefeld setzen : */
  document.demo.anzeige.value=Text;
}

//-->                          <!-- HTML-Kommentarende -->
</script>                      <!-- Script-Bereich beenden -->

</head>
<body onLoad="auswahl();">

<a href="check.html">Erkl&auml;rung</a>
  <!-- Link zurueck auf check.html -->

<br>
<br>
<br>
<form name="demo">  <!-- HTML-Formular definieren -->

<input type=checkbox name="punkte" value="erstens" onClick="auswahl()">
  <!-- Punkt 1 -->
erstens<br>

<input type=checkbox name="punkte" value="zweitens" onClick="auswahl()">
  <!-- Punkt 2 -->
zweitens<br>

<input type=checkbox name="punkte" value="drittens" onClick="auswahl()">
  <!-- Punkt 3 -->
drittens<br>

<input type=checkbox name="punkte" value="viertens" onClick="auswahl()">
  <!-- Punkt 4 -->
viertens<br>

<textarea cols="20" rows="5" type=text name="anzeige" readonly></textarea>
  <!-- Dies ist das Textfeld -->

</form> <!-- HTML-Formular beenden -->
</body>
</html>
index Anfang rückwärts vorwärts hoch
Autor: Ulrich Kritzner