CheckBoxes - The CheckBox Object

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


function CheckBox(layer,imgName,trueValue,falseValue,defaultToTrue) {

	this.layer = layer

	this.imgName = imgName

	this.trueValue = trueValue

	this.falseValue = falseValue

	this.state = (defaultToTrue) ? 1 : 0

	this.value = (this.state) ? this.trueValue : this.falseValue

	this.change = CheckBoxChange

}

function CheckBoxChange() {

	this.state = (this.state) ? 0 : 1

	this.value = (this.state) ? this.trueValue : this.falseValue

	changeImage(this.layer,this.imgName,'checkbox'+this.state)

}

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:

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

View checkboxes1.html for a checkbox example.

Custom Forms:
Buttons
Radio Buttons
Checkboxes
Select Lists

Home Next Lesson: Scroll Object
copyright 1998 Dan Steinman