Versatile Checkbox Enhancement Plugin - jQuery Checkboxes.js

Checkboxes.js is a lightweight, versatile jQuery plugin for enhancing the default checkbox input with the following features:

• Check/uncheck a group of checkboxes in context.
• Allows to toggle the state of all checkboxes in context.
• Allows to set the maximum number of checkboxes that can be checked.
• Allows for range selection.
• Data API is supported as well.

Basic usage:

1. Download and include the jQuery Checkboxes.js script after you've included jQuery JavaScript library.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jquery.checkboxes.min.js"></script>

2. Enable an element to check/uncheck all checkboxes in a container.

<a href="#container"
   data-toggle="checkboxes"
   data-action="check">Check all</a>

<a href="#container"
   data-toggle="checkboxes"
   data-action="uncheck">Uncheck all</a>

// or via JavaScript
$('#btn-check-all').on('click', function(e) {
  $('#container').checkboxes('check');
});

$('#btn-uncheck-all').on('click', function(e) {
  $('#container').checkboxes('uncheck');
});

3. Toggle the state of all checkboxes in a container.

<a href="#container"
   data-toggle="checkboxes"
   data-action="toggle">Toggle all</a>

// or via JavaScript
$('#btn-toggle').on('click', function(e) {
  $('#container').checkboxes('toggle');
});

4. Enable/disable the range selection.

<div data-toggle="checkboxes"
     data-range="true">
   ...
   <-- set of checkboxes -->
   ...
</div>

// or via JavaScript
$('#container').checkboxes('range', true);

5. Set the maximum number of checkboxes that can be checked.

<div data-toggle="checkboxes"
     data-max="3">
     ...
     <-- set of checkboxes -->
     ...
</div>

// or via JavaScript
$('#container').checkboxes('max', 3);

Changelog:

2018-07-09

• Fixed: 'ready' event is deprecated

---

This awesome jQuery plugin is developed by rmariuzzo. For more Advanced Usages, please check the demo page or visit the official website.