The Dynamic Duo - CheckBoxes - El Objeto CheckBox

CheckBoxes - El Objeto CheckBox

Similarmente al Radio Object, el CheckBox object requiere cosas que tienen que ser fijadas en una manera particular.

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)
}

Otra vez, para utilizar este objeto debes tener imágenes para los dos estados del checkbox:

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

Las cuales deben de ser precargadas:

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

Comenzar el Objeto CheckBox

Este es un formato general para el Objeto CheckBox :

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

Donde:

layer - la capa del radio buttons que estan en
imgName - el NAME en la IMG tag (ver abajo)
trueValue - el valor cuando es verificado
falseValue - el valor cuando no es verificado
defaultToTrue - (optional) utilize true si el checkbox es inicialmente true

Para mi ejemplo, tengo un checkbox para alguno que sea fumador o no-fumador. El checkbox está otra vez en la capa "surveyDiv", y he llamado a la imagen "smokerImg". Entonces para que ese checkbox sea iniciado escribiré:

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

El valor ausente en ese caso es no-fumador (falso) "non-smoker" (false). Si deseas que sea verdadero (true) escribiré:

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

HTML para el Objeto CheckBox

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

Utilización del Objeto Checkbox

El hyperlink alrededor de la imagen y para los puntos del texto para el método CheckBox's change(). No hay valores allí que tengas que pasar, porque este conoce de antemano en que estado esta. Si en verdadero (true), el método change() lo hará falso (false), y cambiará el valor del objeto al valor falso (falseValue) y viceversa.

objectName.change()

Y exactamente como el Objeto Radio , para recuperar el valor nada mas tienes que escribir:

objectName.value

Ejemplo: checkbox1.html [source] - para un ejemplo checkbox.

Fuente de Codigo

checkbox.js