JavaScript Tutor - Lektion 21
Vi kan checke og un-checke radio knapper dynamisk med JavaScript.
Den fundamental syntaks er:
button.checked = true
eller
button.checked = false
"checked" er en af radio knap objektets egenskaber. Se på dette...
<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT language="javascript"><!--
function FruitBox()
{
window.document.myform.fruit[0].checked = true;
}
//--></SCRIPT>
</HEAD>
<BODY>
<FORM NAME="myform">
<INPUT TYPE="radio" NAME="fruit" onClick="window.document.myform.fruit.value =
'appelsiner'">Appelsiner & Mandariner<BR>
<INPUT TYPE="radio" NAME="fruit" onClick="window.document.myform.fruit.value =
'bananer'">Bananer<BR>
<INPUT TYPE="radio" NAME="fruit" onClick="window.document.myform.fruit.value =
'ferskner'">Ferskner, Nektariner & Blommer<BR>
For at vælge Appelsiner <A HREF="javascript:FruitBox()">klik her</A>.
</FORM>
</BODY>
</HTML>
|
Prøv det.
Kan du se hvad der foregår? Gruppen af knapper er en array... fruit[0],
fruit[1] og fruit[2], og du kan henvise til den som sådan. Funktionen siger stort set: markér det første element i gruppen, som tilfældigvis er Appelsiner.
Øvelse: Lav scriptet lidt om, for a markere bananer når du klikker på linket.
Her er en løsning.
Øvelse: I stedet for at have tallet (0, 1 eller 2) hard coded ind i funktionen, så send det et tal fra linket. Send det 2 for ferskner.
Her er en løsning.
Nu tilføjer vi to links mere, et for hver frugt...
For at vælge Appelsiner, klik her.
For at vælge Bananer, klik her.
For at vælge Ferskner, klik her.
Vi vil også tilføje en fjerde linie, som fanger den nuværende værdi og viser den i en alertboks...
For at læse den nuværende værdi klik
her.
Indtil nu har vi...
<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT language="javascript"><!--
function FruitBox(whichfruit)
{
window.document.myform.fruit[whichfruit].checked = true;
}
//--></SCRIPT>
</HEAD>
<BODY>
<FORM NAME="myform">
<INPUT TYPE="radio" NAME="fruit" onClick="window.document.myform.fruit.value =
'appelsiner'">Appelsiner & Mandariner<BR>
<INPUT TYPE="radio" NAME="fruit" onClick="window.document.myform.fruit.value =
'bananer'">Bananer<BR>
<INPUT TYPE="radio" NAME="fruit" onClick="window.document.myform.fruit.value =
'ferskner'">Ferskner, Nektariner & Blommer<BR>
For at vælge Appelsiner <A HREF="javascript:FruitBox(0)">klik her</A>.<BR>
For at vælge Bananer <A HREF="javascript:FruitBox(1)">klik her</A>.<BR>
For at vælge Ferskner <A HREF="javascript:FruitBox(2)">klik her</A>.<BR>
For at vælge den nuværende værdi
<A HREF="javascript:alert(window.document.myform.fruit.value)">klik her</A>.
</FORM>
</BODY>
</HTML>
|
Prøv det.
Leg lidt med det. Kan du se et problem? Det er nemt nok at vælge elementer
ved at brug links, men når vi gør det bliver værdien (for
javaScripts vedkommende) stadig returneret som ikke defineret. Hmm.
