CheckBoxes - The Checkbox Object

Similar to the Radio Object, the CheckBox object requires things to be set up in a particular manner.

Again, to use this object you must have images for the two states of the checkbox:

checkbox0.gif (false)
checkbox1.gif (true)

Which must be preloaded:


Initialize the CheckBox Object

This is the general format for the CheckBox Object:

objectName = new CheckBox(layer,imgName,trueValue,falseValue,defaultToTrue)


For my example, I have a checkbox for whether someone is a smoker or a non-smoker. The checkbox is again in the "surveyDiv" layer, and I've named the image "smokerImg". So to initialize that checkbox I'd write:

smoker = new CheckBox('surveyDiv','smokerImg','smoker','non-smoker')

The default value in that case is "non-smoker" (false). If I wanted it to be true I'd write:

smoker = new CheckBox('surveyDiv','smokerImg','smoker','non-smoker',true)

HTML for the CheckBox Object

<P><A HREF="javascript:smoker.change()"><IMG NAME="smokerImg" SRC="checkbox0.gif" WIDTH=10 HEIGHT=12 BORDER="0"> Smoker</A>

Usage of the Checkbox Object

The hyperlink around the image and the text points to the CheckBox's change() method. There is no values that you have to pass, because it already knows what state it's in. If it's true, the change() method will make it false, and change the value of the object to the falseValue, and vica-versa.


And exactly like the Radio Object, to retrieve the value you just write:


View checkbox1.html for a checkbox example.

Source Code

Download: checkbox.js
View Source: checkbox.js

Home Next Lesson: Scroll Concepts
copyright 1998 Dan Steinman

Casa de Bender