Javascript Tutor
- Lesson 21
We can dynamically check
and un-check radio buttons with javascript. The basic syntax is:
button.checked = true
or
button.checked = false
"checked" is a property of the radio button object. Have a
look at this...
<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
= 'oranges'">Oranges & Tangerines<BR>
<INPUT TYPE="radio" NAME="fruit" onClick="window.document.myform.fruit.value
= 'bananas'">Bananas<BR>
<INPUT TYPE="radio" NAME="fruit" onClick="window.document.myform.fruit.value
= 'peaches'">Peaches, Nectarines & Plums<BR>
To select Oranges <A HREF="javascript:FruitBox()">click here</A>.
</FORM>
</BODY>
</HTML>
Try it.
See what's going on? The group of buttons is an array... fruit[0], fruit[1]
and fruit[2], and can be referenced as such. The function basically says, check
the first element in that group, which happens to be Oranges.
Exercise: Slightly alter the script to check bananas when the link is
clicked.
Exercise: rather than having the number (0, 1 or 2) hard coded into the
function, send it a number from the link. Send it 2 for peaches.
Now we'll add two more links, one for each fruit...
To select Oranges
To select Bananas
To select Peaches
Notice that Oranges, Bananas and Peaches all have 7 letters? And 7 is only one
more than 6? And 666 is the sign of the devil? I think this means that these
fruits are the fruit of the devil. Or maybe it means that the devil likes fruit?
I don't know, it has to be more than just a coincidence, don't you think? ;-)
We'll also add a fourth line that grabs the current value and throws it up in
an alert box...
Here is what we have to this point...
<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
= 'oranges'">Oranges & Tangerines<BR>
<INPUT TYPE="radio" NAME="fruit" onClick="window.document.myform.fruit.value
= 'bananas'">Bananas<BR>
<INPUT TYPE="radio" NAME="fruit" onClick="window.document.myform.fruit.value
= 'peaches'">Peaches, Nectarines & Plums<BR>
To select Oranges <A HREF="javascript:FruitBox(0)">click here</A>.<BR>
To select Bananas <A HREF="javascript:FruitBox(1)">click here</A>.<BR>
To select Peaches <A HREF="javascript:FruitBox(2)">click here</A>.<BR>
To read the current value <A HREF="javascript:alert(window.document.myform.fruit.value)">click
here</A>.
</FORM>
</BODY>
</HTML>
Try it.
Play with the thing a bit. Do you notice a problem? We can select items easy
enough using the links, but when we do, the value (as far as javascript is concerned)
still comes back as undefined. Hmm