Synchronize Related Checkboxes with Checkboxes.js jQuery Plugin

A lightweight check all jQuery plugin created to synchronize related checkboxes that have a parent/child relationship.

When the parent checkbox is clicked, the plugin will then automatically check or uncheck all child checkboxes based on the parent's state. Similarly, when a child checkbox is clicked, it will check the parent checkbox if all child checkboxes are checked.

It can be useful in web forms where users might need to perform actions on multiple items simultaneously - such as deleting multiple emails, selecting multiple products, or applying an action to multiple admin records.

How to use it:

1. Add the minified version of the Checkboxes.js plugin after jQuery library.

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

2. Call the function checkboxes() on the parent checkbox and passing in the selector for its child checkboxes.

<!-- Check All -->
<input type="checkbox" id="chkAll" />

<!-- Child Checkboxes -->
<input type="checkbox" id="chk01" name="chk01" />
<input type="checkbox" id="chk02" name="chk02" />
<input type="checkbox" id="chk03" name="chk03" />
...

$(function () {
  $("#chkAll").checkboxes({
    itemChild: "chk",
  });
});

---

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