checkb✓xes.js

A jQuery plugin giving you superpowers over your checkboxes.

View on GitHub Download v1.2.2

Installation

Get started in seconds.

npm
npm install checkboxes.js
or download
github.com/rmariuzzo/checkboxes.js/releases

Features

Everything you need for checkbox management.

Check all

Check all checkboxes within a context element.

JavaScript
$('#btn-check-all').on('click', function(e) {
  $('#table1').checkboxes('check');
  e.preventDefault();
});
Data API
<a href="#table1"
   data-toggle="checkboxes"
   data-action="check">Check all</a>
Demo
Check all Reset
#table1

Uncheck all

Uncheck all checkboxes within a context element.

JavaScript
$('#btn-uncheck-all').on('click', function(e) {
  $('#table2').checkboxes('uncheck');
  e.preventDefault();
});
Data API
<a href="#table2"
   data-toggle="checkboxes"
   data-action="uncheck">Uncheck all</a>
Demo
Uncheck all Reset
#table2

Toggle

Toggle the state of all checkboxes within a context element.

JavaScript
$('#btn-toggle').on('click', function(e) {
  $('#table3').checkboxes('toggle');
  e.preventDefault();
});
Data API
<a href="#table3"
   data-toggle="checkboxes"
   data-action="toggle">Toggle all</a>
Demo
Toggle all
#table3

Range selection

Check a range of checkboxes: check the first, then hold SHIFT and check another to select all in between.

JavaScript
$('#table4').checkboxes('range', true);
Data API
<div data-toggle="checkboxes"
     data-range="true">
  ...
</div>
Demo — try SHIFT+click
#table4

Limit

Limit the maximum number of checkboxes that can be checked within a context.

JavaScript
$('#table5').checkboxes('max', 3);
Data API
<div data-toggle="checkboxes"
     data-max="3">
  ...
</div>
Demo — max 3 selections
#table5 max 3