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:


Initialize the Radio Objects:

This is the general format for the Radio Object:

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


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.



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


View radio1.html for a radio button example.

Source Code

Download: radio.js
View Source: radio.js

Home Next Lesson: Checkboxes
copyright 1998 Dan Steinman

Casa de Bender