<html>
<head>
<title>Kontroll- und Optionsfelder deselektieren, setzen und auslesen</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript">
<!--

function show_text_hobby()
{
   // Variablen mit Leerstring initialisieren
   myText="";
   myValue="";

   // Gr��e des Optionsfeldes ermitteln
   anzahl=document.inputForm.hobby.length;

   for (i=0; i<anzahl;i++)
   {
      if (document.inputForm.hobby[i].checked)
      {
         // zugeh�rigen Wert f�r die Ausgabe ermitteln
         myValue=document.inputForm.hobby[i].value;
  
         // zugeh�rigen Text f�r die Ausgabe ermitteln
         switch(myValue)
         {
            case "a":
               myText = "Schwimmen";
               break;
            case "b":
               myText = "Fu�ball spielen";
               break;
            case "c":
               myText = "Rad fahren";
               break;
            default:
               myText = "Programmfehler";
            break;
         }
         // Text komplett fertig zusammenbauen
         myText= "Mein liebstes Hobby: " + myText + " hat den Wert " + myValue + " \n";
      }
   }
   return myText;
}

function show_text_gewohnheiten()
{
   // Variable mit Leerstring initialisieren
   myText="";
   myValue="";
   myZeilen="";

   // Gr��e des Kontrollfeldes(= der Checkbox) ermitteln
   anzahl=document.inputForm.gewohnheiten.length;

   for (i=0; i<anzahl;i++)
   {
      if (document.inputForm.gewohnheiten[i].checked)
      {
         // Text zeilenweise zusammenbauen
         myValue=document.inputForm.gewohnheiten[i].value;
         
         switch(myValue)
         {
            case "a":
               myText = "Nichtraucher";
               break;
            case "b":
               myText = "Vegetarier";
               break;
            case "c":
               myText = "Alkoholiker";
               break;
            default:
               myText = "Programmfehler";
            break;
         }
         myZeilen=myZeilen+"Meine Gewohnheit: " + myText + " hat den Wert " + myValue + " \n";
      }    
   }

   return myZeilen;
}

function myShowData()
{
   // Variable definieren
   var text;
   text=show_text_gewohnheiten();
   text=text+show_text_hobby();

   if (text!="")
   { 
      alert(text);
   }
   else
   { 
      alert("Keine Gewohnheiten, kein liebstes Hobby !");
   }
}

function myClearData()
{
   // alle Eingabefelder leeren

   anzahl=document.inputForm.gewohnheiten.length;

   for (i=0; i<anzahl;i++)
   {
      document.inputForm.gewohnheiten[i].checked=false;
   }

   anzahl=document.inputForm.hobby.length;

   for (i=0; i<anzahl;i++)
   {
      document.inputForm.hobby[i].checked=false;
   }
}

//-->
</script>

</head>
<body bgcolor="#FFFFFF" text="#000000">
<form name="inputForm"  onSubmit="myShowData()">
   <table border="0" cellspacing="5" cellpadding="0">
   <tr>
      <td height="15"></td>
      <td></td>
   </tr>
   <tr>
      <td><b>Meine Gewohnheiten:</b></td>
      <td></td>
   </tr>
   <tr>
      <td>
         <label>Nichtraucher</label>
      </td>
      <td>
         <input name="gewohnheiten"  type="checkbox" value="a" checked>
      </td>
   </tr>
   <tr>
      <td>
         <label>Vegetarier</label>
      </td>
      <td>
         <input name="gewohnheiten"  type="checkbox" value="b" checked>
      </td>
   </tr>
   <tr>
      <td>
         <label>Alkoholiker</label>
      </td>
      <td>
         <input name="gewohnheiten"  type="checkbox" value="c" >
      </td>
   </tr>
   <tr>
      <td height="15"></td>
      <td></td>
   </tr>
   </tr>
   <tr>
      <td><b>Mein liebstes Hobby:</b></td>
      <td></td>
   </tr>
   <tr>
      <td>
         <label>Schwimmen</label>
      </td>
      <td>
         <input name="hobby"  type="radio" value="a" >
      </td>
   </tr>
   <tr>
      <td>
         <label>Fu&szlig;ball spielen</label>
      </td>
      <td>
         <input name="hobby"  type="radio" value="b" checked >
      </td>
   </tr>
   <tr>
      <td>
         <label>Rad fahren</label>
      </td>
      <td>
         <input name="hobby"  type="radio" value="c" >
      </td>
    </tr>
    <tr>
      <td align="left">
         <input type="button" value="Deselect" onClick="myClearData()">
      <td align="right">
         <input type="submit" value="Show">
      </td>
    </tr>
   </table>
</form>
</body>
</html>