Javascript Tutor - Lektion 21
Wir können mit Javascript Radiobutton dynamisch aus- und abwählen. Der grundlegende Syntax lautet:
button.checked = true
or
button.checked = false
"checked" ist eine Eigenschaft des Objektes Radiobutton. Schau Dir das hier an...
<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT language="javascript"><!--
function FruitBox()
{
window.document.myform.frucht[0].checked = true;
}
//--></SCRIPT>
</HEAD>
<BODY>
<FORM NAME="myform">
<INPUT TYPE="radio" NAME="frucht" onClick="window.document.myform.frucht.value = 'Orangen'">Orangen & Mandarinen<BR>
<INPUT TYPE="radio" NAME="frucht" onClick="window.document.myform.frucht.value = 'Bananen'">Bananen<BR>
<INPUT TYPE="radio" NAME="frucht" onClick="window.document.myform.frucht.value = 'Pfirsiche'">Pfirsiche, Nektarinen & Pflaumen<BR>
Um Orangen zu wählen, <A HREF="javascript:FruitBox()">klicke hier</A>.
</FORM>
</BODY>
</HTML>
|
Verstehst Du, was passiert? Die Gruppe der Button ist ein Array... frucht[0], frucht[1] und frucht[2], und kann als dieses angesprochen werden. Die Funktion sagt im Grunde, wähle das erste Element der Gruppe aus, was zufällig "Orangen" ist.
Übung: Verändere das Script leicht, das "Bananen" ausgewählt ist, wenn Du den Link klickst.
Übung: Anstatt die Zahl (0, 1 oder 2) fest in die Funktion zu programmieren, sende eine Zahl vom Link. Sende der Funktion 2 für "Pfirsiche".
Nun werden wir noch 2 Links hinzufügen, einen für jede Frucht...
Um Orangen
zu wählen, klicke hier.
Um Bananen zu wählen, klicke hier.
Um Pfirsiche zu wählen, klicke hier.
Wir fügen noch einen vierten Link hinzu, der den aktuellen Wert nimmt und ihn in einer PopUp Box anzeigt...
Um den aktuellen Wert zu lesen, klicke hier.
Hier ist, was wir bis jetzt getan haben...
<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT language="javascript"><!--
function FruitBox(welchefrucht)
{
window.document.myform.frucht[welchefrucht].checked = true;
}
//--></SCRIPT>
</HEAD>
<BODY>
<FORM NAME="myform">
<INPUT TYPE="radio" NAME="frucht" onClick="window.document.myform.frucht.value = 'Orangen'">Orangen & Mandarinen<BR>
<INPUT TYPE="radio" NAME="frucht" onClick="window.document.myform.frucht.value = 'Bananen'">Bananen<BR>
<INPUT TYPE="radio" NAME="frucht" onClick="window.document.myform.frucht.value = 'Pfirsiche'">Pfirsiche, Nektarinen & Pflaumen<BR>
Um Orangen zu wählen, <A HREF="javascript:FruitBox(0)">klicke hier</A>.<BR>
Um Bananen zu wählen, <A HREF="javascript:FruitBox(1)">klicke hier</A>.<BR>
Um Pfirsiche zu wählen <A HREF="javascript:FruitBox(2)">klicke hier</A>.<BR>
Um den aktuellen Wert zu sehen, <A HREF="javascript:alert(window.document.myform.frucht.value)">klicke hier</A>.
</FORM>
</BODY>
</HTML>
|
Spiele noch ein wenig damit herum. Hast Du ein Problem festgestellt? Wir können die Elemente einfach per Link auswählen, aber der Wert (bezüglich Javascript) kommt immer als "undefiniert" zurück Hmm.
| << Zurück Weiter >> |
 |
|
 |
