The Dynamic Duo - Radio Buttons

Radio Buttons - The Radio Object

To replace the need for standard radio buttons, I've written my own Radio Object.

To use this object you must have images for the two states of the radio buttons:

radio0.gif (false)
radio1.gif (true)

And you must preload those:

preload('radio0','radio0.gif')
preload('radio1','radio1.gif')

Initialize the Radio Objects:

This is the general format for the Radio Object:

objectName = new Radio(layer,imgNames,length,defaultValue)

Where:

layer - the layer the radio buttons are in
imgNames - the NAMES in the IMG tags (see below)
length - the number of radio buttons in the list
defaultValue - (optional) the default value of the radio button

For my example I will have a list for the number of computers in a persons household (from 1 to 4), again I have it in the "surveyDiv" layer, and I want the default value to be "two":

computers = new Radio('surveyDiv','computersImg',4,'two')

HTML for the Radio Object:

When writing the HTML you have to show the image of the "false" state for all the images except for one of them (the one you want to default to "true"). In my case I have the second radio button to be true. Then for each image I have to name them in a consistant manner "computersImg0", "computersImg1" etc. The name "computersImg" is the imgNames for the Radio Object.

<P>Number of computers in your household:
<BR><A HREF="javascript:computers.change(0,'one')"><IMG NAME="computersImg0" SRC="radio0.gif" WIDTH=10 HEIGHT=10 BORDER="0"> one
<BR><A HREF="javascript:computers.change(1,'two')"><IMG NAME="computersImg1" SRC="radio1.gif" WIDTH=10 HEIGHT=10 BORDER="0"> two
<BR><A HREF="javascript:computers.change(2,'three')"><IMG NAME="computersImg2" SRC="radio0.gif" WIDTH=10 HEIGHT=10 BORDER="0"> three
<BR><A HREF="javascript:computers.change(3,'four')"><IMG NAME="computersImg3" SRC="radio0.gif" WIDTH=10 HEIGHT=10 BORDER="0"> four

Usage of the Radio Object:

The hyperlink around both the image and the text is pointed to the change() method of the Radio Object.

objectName.change(index,value)

Where:

index - index number of the radio button list (the same number in the IMG NAME attribute)
value - the value associated with that radio button.

When you go to retrieve the value of the radio button, you simply write:

objectName.value

Example: radio1.html [source] - for a radio button example.

Source Code

radio.js