Check All Related Checkboxes - jQuery jCheckBox

Just another jQuery based Check All plugin that enables a parent checkbox to check and uncheck all of its related checkboxes.

The parent checkbox becomes checked if at least one of its related checkboxes is checked.

How to use it:

1. Include the minified version of the jCheckBox plugin after jQuery library.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/dist/jquery.jCheckBox.min.js"></script>

2. Create a 'Parent' checkbox for checkbox groups as follows:

<div class="languages">
  <div class="parent">
    <input type="checkbox" id="1" value="1">
    <label for="1">Manage Student</label>
  </div>
  <div class="child">
    <input type="checkbox" id="2" value="2" class="parent-1">
    <label for="2">JavaScript</label>
  </div>
  <div class="child">
    <input type="checkbox" id="3" value="3" class="parent-1">
    <label for="3">XML/HTML5</label>
  </div>
  <div class="child">
    <input type="checkbox" id="4" value="4" class="parent-1">
    <label for="3">CSS/CSS3</label>
  </div>
</div>

3. Attach the function jCheckBox to the top container. That's it.

let instance = $("#languages").jCheckBox();

4. Check/uncheck all checkboxes programmatically.

instance.checkAll();
instance.unCheckAll();

5. Uncheck a specified checkbox .

// instance.unCheck(id);
instance.unCheck(#2);

6. Disable the Check All checkbox.

let instance = $("#languages").jCheckBox({
    checkChildren: false
});

7. Override the default CSS selector of the Check All checkbox. Default: 'parent'.

let instance = $("#languages").jCheckBox({
    parentClass: "customParent"
});

8. Available callback functions.

let instance = $("#languages").jCheckBox({
    onParentChecked: function() {
      // do something
    },
    onChildChecked: function() {
      // do something
    },
    onParentUnchecked: function() {
      // do something
    },
    onChildUnchecked: function() {
      // do something
    },
});

Changelog:

2020-02-25

• Bugfix

---

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