Checkbox checkbox.js

The checkbox control provides a customized look and feel that can be standardized across all browsers.

checkbox

Usage

Via JavaScript

Initialize the checkbox control via JavaScript:

{% highlight js %}$('#myCheckbox').checkbox();{% endhighlight %}

Via data-attributes

• Checkbox input elements that exist when $.ready() executes that have data-initialize="checkbox" on their parent will be initialized immediately.
• Checkbox input elements that are created with data-initialize="checkbox" after $.ready() executes will initialize when a mouseover event occurs on them.

Methods

Once your checkbox is initialized, you can execute any of the following methods on it:

.checkbox('check')

Ensures the checkbox is checked.

.checkbox('destroy')

Removes all functionality, jQuery data, and the markup from the DOM. Returns string of control markup as close to it's pre-initialization state as possible.

.checkbox('disable')

Ensures the checkbox is disabled.

.checkbox('enable')

Ensures the checkbox is enabled.

.checkbox('isChecked')

Returns true or false indicating the checked state of the checkbox.

.checkbox('toggle')

Toggles the checkbox between checked/unchecked states.

.checkbox('uncheck')

Ensures the checkbox is unchecked.

Events

All checkbox events are fired on the .checkbox classed element. However, unlike the majority of Fuel UX controls, it is recommended to listen to and check the state of the checkbox control by listening to the native checkbox with the change event and check its status with the presence of the checked attribute. For the sample markup provided, this would be:

{% highlight js %} $('.checkbox input').on('change', function () { console.log( $(this).is(':checked') ); }); {% endhighlight %}

Examples

Default (stacked)

{% highlight html %} {% endhighlight %}

Inline checkboxes

Use the .checkbox-inline class on checkboxes for controls that appear on the same line.

{% highlight html %} 1 2 3 {% endhighlight %}

Element toggling checkboxes

Use the data-toggle="{{selector}}" to automatically show or hide elements matching the selector within the body upon check or uncheck. This control works with any jQuery selector.

{% highlight html %} Toggles elements with matching class. {% endhighlight %}

Highlighting checkboxes

Use the .highlight class to add a background highlight upon check.

{% highlight html %} This control highlights an inline checkbox on check {% endhighlight %}

Events

Unlike the majority of Fuel UX controls, it is recommended to listen to and check the state of the checkbox control by listening to the native checkbox with the change event and check its status with the presence of the checked attribute. For the sample markup provided, this would be:

{% highlight js %} $('.checkbox input').on('change', function () { console.log( $(this).is(':checked') ); }); {% endhighlight %}