jQuery Plugin To Check / Uncheck All Checboxes - SelectAllCheckbox

File Size: 92.6 KB
Views Total: 2803
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Plugin To Check / Uncheck All Checboxes - SelectAllCheckbox

Just another jQuery plugin that adds check all and uncheck all functionalities to the checkbox group. Click on the master checkbox to select or deselect all slave checkboxes.

See also:

How to use it:

1. Create a master checkbox for your checkbox group.

<label class="selectAllLabel">
  <input type="checkbox" id="selectAllGroup1"/>
  Select All
</label>

<label>
  <input type="checkbox" id="group1_a" name="group1" value="1a"/>
  Choice A
</label>

<label>
  <input type="checkbox" id="group1_b" name="group1" value="1b"/>
  Choice B
</label>

<label>
  <input type="checkbox" id="group1_c" name="group1" value="1c"/>
  Choice C
</label>

2. Download and include the plugin after you've loaded jQuery library.

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

3. Enable the 'check all' and 'uncheck all' functionalities on the master checkbox.

$( "#selectAllGroup1" ).selectAllCheckbox( {
  checkboxesName    : "group1",
});

4. Disable the tri-state on the master checkbox when only a subset of checkboxes are checked.

$( "#selectAllGroup1" ).selectAllCheckbox( {
  checkboxesName    : "group1",
});

5. Execute a callback when you select all checkboxes.

$( "#selectAllGroup1" ).selectAllCheckbox( {
  checkboxesName    : "group1",
  selectAllCallback : null 
});

6. Execute a callback when one of the checkboxes is selected.

$( "#selectAllGroup1" ).selectAllCheckbox( {
  checkboxesName    : "group1",
  selectAllCallback : null,
  selectCallback    : null
});

Change log:

v3.0.0 (2017-04-12)

  • The select-all checkbox no longer changes the state of disabled checkboxes
  • BREAKING CHANGE: If you are using SelectAllCheckbox in an unusual scenario of ticking the select-all checkbox via script and then firing change to trigger the select-all action, you'll find that that no longer works. IE has a known bug where it doesn't fire the change event when an indeterminate checkbox is clicked, meaning that until this release, this plugin was never fully compatible with IE. To get around the issue, the plugin now listens for the click event on the select-all checkbox instead of change. The other checkboxes continue to use the change event as they always have.
  • The select-all checkbox initializes to the proper state (checked, unchecked, indeterminate) based on the state of the checkbox group when the plugin is initialized

v2.0.1 (2016-09-01)

  • Fixed a bug where the 'select all' logic wasn't performing a check on the callback to see if it existed before calling it

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