caph-checkbox provides checkbox supporting the caph's focus and key navigation caph.focus
With caph-checkbox, you can set basic checkbox which provides the text and checkbox.
Caph checkbox set default action, you can change style or action through option and event handler.
When checkbox is focused or blurred, 'focused' class is attached or detached automatically
Details about available focus option
Also, when checked the 'checked' class attached at the checkbox. You can set focus/blur/check action easily through css class
You can set the event handler actions like example.
| type | option | description |
|---|---|---|
| object | 'focusOption' | focus name, focus group, disabled, initialfocus.... |
| string | 'checkboxClass' | Default checkbox class which applied in unchecked checkbox. When checked, 'checked' css class added automatically. |
| boolean | 'checked' | Set the initial status of checkbox (checked, unchecked) |
| function | 'onFocused' | Set the event handler when Checkbox is focused. Checkbox passes two parameters '$event' and '$originalEvent' |
| function | 'onBlurred' | Set the event handler when Checkbox is blurred. Checkbox passes two parameters '$event' and '$originalEvent' |
| function | 'onSelected' | Set the event handler when Checkbox is selected. Checkbox passes three parameters '$event', '$originalEvent' ,and 'checked'. 'checked' variable notifies checkbox is checked or not. |
Example
js
$('#checkbox').caphCheckbox({
focusOption: {
depth : 0,
group : "testgroup"
},
checked : true,
onFocused :function(event,originalEvent){
},
onBlurred:function(event,originalEvent){
},
onSelected :function(event,originalEvent,selected){
}
}
);html
<div id="checkbox">Checkbox</div>