JavaScript - Umgang mit Radiobuttons

index Anfang rückwärts vorwärts runter
Das aufgelistete Beispiel demonstriert den Umgang mit Radiobuttons. Das Formular hat den Namen demo bekommen, und das Ausgabefeld den Namen anzeige. Die Radiobuttons müssen über document.demo.elements[0] bis document.demo.elements[3] angesprochen werden, da sie wegen ihrer Zugehörigkeit zur gleichen Gruppe gleiche Namen erhalten müssen. Pro Gruppe ist die Auswahl eines Radiobuttons möglich.

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="keine Auswahl";

   /* jeden Radiobutton abchecken : */
  for (i=0;i<4;i++)
    if (document.demo.elements[i].checked)
      Text=document.demo.elements[i].value;

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

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

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

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

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

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

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

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

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

<input type=text name="anzeige" value="" size="15" readonly>
  <!-- Dies ist das Textfeld -->

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