checkbxes.js

TL;DR — A jQuery plugin that gives you nice powers over your checkboxes.

View in GitHub Download v1.0.7

Quick installation

Using bower:

bower install checkboxes.js

Or download the latest release.

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

Examples aka documentation

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.

Results

Check all Reset

#table1

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.

Results

Uncheck all Reset

#table2

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.

Results

Toggle all

#table3

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 the SHIFT 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.

Results

#table4

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.

Results

#table5