Versatile Checkbox Enhancement Plugin - jQuery Checkboxes.js

Versatile Checkbox Enhancement Plugin - jQuery Checkboxes.js
File Size: 74.4 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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);

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