The Dynamic Duo - Checkboxes - The Checkbox Object

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:

preload('checkbox0','checkbox0.gif')
preload('checkbox1','checkbox1.gif')

Initialize the CheckBox Object

This is the general format for the CheckBox Object:

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

Where:

layer - the layer the radio buttons are in
imgName - the NAME in the IMG tag (see below)
trueValue - the value when checked
falseValue - the value when not checked
defaultToTrue - (optional) use true if the checkbox is initially true

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.

objectName.change()

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

objectName.value

Example: checkbox1.html [source] - for a checkbox example.

Source Code

checkbox.js