Types
Checkbox
A standard checkbox
Slider
A checkbox can be formatted to show user selection as a slider
Toggle
A checkbox can be formatted to show user selection as a toggle
Radio Box
A checkbox can be formatted as a radio element. This means it is an exclusive option.
HTML Only Checkbox
Using checkboxes with HTML only, you must match the for attribute of your label to the id attribute of your checkbox.
Variations
Size
A checkbox can be a different size.
Check Box
A checkbox can be initialized with javascript for increase programmatic control
$('.ui.checkbox')
.checkbox()
;
Check Box without Javascript
A checkbox can also be used without using javascript by matching the id attribute of the input field to the for attribute of the accompanying label
Behavior
| enable | A checkbox can change to show a user has selected it |
| disable | A checkbox can change to show a user has deselected it |
| toggle | A checkbox can toggle its current selection state |
Examples
Example of using checkbox states to alter multiple checkboxes
$('.enable.button')
.on('click', function() {
$(this)
.nextAll('.checkbox')
.checkbox('enable')
;
})
;
$('.disable.button')
.on('click', function() {
$(this)
.nextAll('.checkbox')
.checkbox('disable')
;
})
;
$('.toggle.button')
.on('click', function() {
$(this)
.nextAll('.checkbox')
.checkbox('toggle')
;
})
;
Checkbox Settings
Checkbox settings modify its behavior
| Setting | Default | Description |
|---|---|---|
| required | auto | Setting to true/false will determine whether an input will allow no selection. Auto will set disallow this behavior only for radio boxes |
| context | false | A selector or jQuery object to use as a delegated event context |
Callbacks
Callbacks specify a function to occur after a specific behavior.
| Setting | Context | Description |
|---|---|---|
| onChange | Checkbox | Callback after a checkbox is either disabled or enabled. |
| onEnable | Checkbox | Callback after a checkbox is enabled. |
| onDisable | Checkbox | Callback after a checkbox is disabled. |
DOM Settings
DOM settings specify how this module should interface with the DOM
| Setting | Default | Description |
|---|---|---|
| namespace | checkbox | Event namespace. Makes sure module teardown does not effect other events attached to an element. |
| selector |
selector : {
input : 'input',
label : 'label'
}
|
|
| className |
className : {
radio : 'radio'
}
|
|