Minimal Check All Checkbox Plugin - jquery.checkbox.js

A lightweight and fast jQuery Check All plugin to manage multiple checkboxes easily.

This plugin enables a PARENT checkbox to check and uncheck its children with a single click. Also comes with a callback function which can be used to trigger a custom function whenever one of the checkboxes changes state.

See Also:

• 10 Best JavaScript Plugins To Check All Checkboxes

How to use it:

1. Download and place the jquery.checkbox.js script after the latest jQuery library (slim build is recommended).

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/jquery.checkbox.js"></script>

2. Create a PARENT checkbox input on the page and specify the selector of its children in the data-children attribute as follows:

<input id="checkbox" type="checkbox" data-children=".children">
<div>
  <input type="checkbox" class="children" value="1" checked>
  <input type="checkbox" class="children" value="2">
  <input type="checkbox" class="children" value="3">
  <input type="checkbox" class="children" value="4">
  <input type="checkbox" class="children" value="5">
  <input type="checkbox" class="children" value="6">
</div>

3. Initialize the plugin:

$(function(){
  var checkbox = $("#checkbox").checkbox();
});

4. Get the value(s) of the selected checkboxes.

var checkbox = $("#checkbox").checkbox(function(values) {
    $("#output").html(values.join(','));
});

---

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