Use the following code to create a basic inputEx CheckBox.
| 1 | new inputEx.CheckBox({parentEl: 'container1'}); |
| view plain | print | ? |
Add the label
| 1 | new inputEx.CheckBox({label: 'Do you like inputEx ?', rightLabel: 'Check me !', parentEl: 'container2', value: false}); |
| view plain | print | ? |
In its simplest form, the CheckBox returns true if checked, false otherwise.
| 1 | var exampleDiv = YAHOO.util.Dom.get('container3'); |
| 2 | var field1 = new inputEx.CheckBox({rightLabel: 'I return true/false', parentEl: exampleDiv}); |
| 3 | var button = inputEx.cn('button', null, null, 'getValue()'); |
| 4 | exampleDiv.appendChild(button); |
| 5 | YAHOO.util.Event.addListener(button, 'click', function() { alert(field1.getValue()); }); |
| view plain | print | ? |
You can return different values if needed.
| 1 | var exampleDiv = YAHOO.util.Dom.get('container4'); |
| 2 | var field2 = new inputEx.CheckBox({sentValues: ['Yes', 'No'], rightLabel: 'Do you agree ?', parentEl: exampleDiv, value: 'Yes'}); |
| 3 | var button = inputEx.cn('button', null, null, 'getValue()'); |
| 4 | var button2 = inputEx.cn('button', null, null, 'setValue("No")'); |
| 5 | var button3 = inputEx.cn('button', null, null, 'setValue("Yes")'); |
| 6 | exampleDiv.appendChild(button); |
| 7 | exampleDiv.appendChild(button2); |
| 8 | exampleDiv.appendChild(button3); |
| 9 | YAHOO.util.Event.addListener(button, 'click', function() { alert(field2.getValue()); }); |
| 10 | YAHOO.util.Event.addListener(button2, 'click', function() { field2.setValue('No'); }); |
| 11 | YAHOO.util.Event.addListener(button3, 'click', function() { field2.setValue('Yes'); }); |
| view plain | print | ? |
How to listen to the updated event :
| 1 | var el = YAHOO.util.Dom.get('container5'); |
| 2 | var field = new inputEx.CheckBox({parentEl: el }); |
| 3 | var logDiv = inputEx.cn('div', null, null, "Log :"); |
| 4 | el.appendChild(logDiv); |
| 5 | field.updatedEvt.subscribe(function() { |
| 6 | logDiv.innerHTML += "Updated at "+(new Date())+" with value : "+field.getValue(); |
| 7 | logDiv.appendChild(inputEx.cn('br')); |
| 8 | }); |
| view plain | print | ? |
How to enable/disable a checkbox :
| 1 | var dc = new inputEx.CheckBox({label: 'Disable', parentEl: 'container6'}); |
| 2 | dc.disable(); |
| view plain | print | ? |