JS Tutorial
- Overview
- Documents
Features
- Check all checkboxes in context
- Uncheck all checkboxes in context
- Toggle states of all checkboxes in context
- Enable range selection
- Limit the number of checked checkbox per context
- Data API like Twitter Bootstrap
Installation
- Include jQuery into your HTML page.
- Include jQuery.checkboxes.min.js into your HTML page, just after jQuery.
Checking all checkboxes in context
JavaScript
jQuery(function($) {
$('#btn-check-all').on('click', function(e) {
$('#table1').checkboxes('check');
e.preventDefault();
});
});
Data API
The following snippet is the equivalent form of the previous JavaScipt code rewritten with the data API.
<a href="#table1" data-toggle="checkboxes" data-action="check">Check all</a>
This will have the exact same effect as the JavaScript code.
Unchecking all checkboxes in context
JavaScript
jQuery(function($) {
$('#btn-uncheck-all').on('click', function(e) {
$('#table2').checkboxes('uncheck');
e.preventDefault();
});
});
Data API
The following snippet is the equivalent form of the previous JavaScipt code rewritten with the data API.
<a href="#table2" data-toggle="checkboxes" data-action="uncheck">Uncheck all</a>
This will have the exact same effect as the JavaScript code.
Toggling all checkboxes's state in context
JavaScript
jQuery(function($) {
$('#btn-toggle').on('click', function(e) {
$('#table3').checkboxes('toggle');
e.preventDefault();
});
});
Data API
The following snippet is the equivalent form of the previous JavaScipt code rewritten with the data API.
<a href="#table3" data-toggle="checkboxes" data-action="toggle">Toggle all</a>
This will have the exact same effect as the JavaScript code.
Enabling range selection of checkboxes
Range selection is a feature that allow checking a range of checkboxes by checking the first checkbox as the starting point, then while pressing theSHIFT key checking another checkbox that will be the ending of the range, and all checkboxes between will be checked.
JavaScript
jQuery(function($) {
$('#table4').checkboxes('range', true);
});
Data API
The following snippet is the equivalent form of the previous JavaScipt code rewritten with the data API.
<div data-toggle="checkboxes"
data-range="true">
...
<-- set of checkboxes -->
...
</div>
This will have the exact same effect as the JavaScript code.
Limiting the number of checked checkboxes in a context
Often, it is useful to limit the number of checkboxes that can be checked within a context.
JavaScript
jQuery(function($) {
$('#table5').checkboxes('max', 3);
});
Data API
The following snippet is the equivalent form of the previous JavaScipt code rewritten with the data API.
<div data-toggle="checkboxes"
data-max="3">
...
<-- set of checkboxes -->
...
</div>
This will have the exact same effect as the JavaScript code.
