inputEx - CheckBox Usage

Basic CheckBox creation

Use the following code to create a basic inputEx CheckBox.

new inputEx.CheckBox({parentEl: 'container1'});

With a label

Add the label

new inputEx.CheckBox({label: 'Do you like inputEx ?', rightLabel: 'Check me !', parentEl: 'container2', value: false});

Default returned values

In its simplest form, the CheckBox returns true if checked, false otherwise.

var exampleDiv = YAHOO.util.Dom.get('container3'); var field1 = new inputEx.CheckBox({rightLabel: 'I return true/false', parentEl: exampleDiv}); var button = inputEx.cn('button', null, null, 'getValue()'); exampleDiv.appendChild(button); YAHOO.util.Event.addListener(button, 'click', function() { alert(field1.getValue()); });

Changing the returned values

You can return different values if needed.

var exampleDiv = YAHOO.util.Dom.get('container4'); var field2 = new inputEx.CheckBox({sentValues: ['Yes', 'No'], rightLabel: 'Do you agree ?', parentEl: exampleDiv, value: 'No'}); var button = inputEx.cn('button', null, null, 'getValue()'); exampleDiv.appendChild(button); YAHOO.util.Event.addListener(button, 'click', function() { alert(field2.getValue()); });

Updated event

How to listen to the updated event :

var el = YAHOO.util.Dom.get('container5'); var field = new YAHOO.inputEx.CheckBox({parentEl: el }); var logDiv = YAHOO.inputEx.cn('div', null, null, "Log :<br />"); el.appendChild(logDiv); field.updatedEvt.subscribe(function() { logDiv.innerHTML += "Updated at "+(new Date())+"<br />"; });

Disabling checkboxes

How to enable/disable a checkbox :

var dc = new YAHOO.inputEx.CheckBox({label: 'Disable', parentEl: 'container6'}); dc.disable();