Simplifying Nested Checkbox Relationships - jQuery checkem.js

checkem.js is a lightweight and easy-to-use jQuery plugin to simplify the parent-child relationship among checkboxes.

When a "parent" checkbox is checked, all "child" checkboxes within that group are automatically checked. Similarly, if all child checkboxes in a group are checked, the parent checkbox is also checked. 

In addition, the plugin supports nested checkboxes, which makes it perfectly suited for complex forms and interactive lists.

See Also:

• 10 Best JavaScript Plugins To Check All Checkboxes

How to use it:

1. To get started, include the minified version of the checkem.js script after jQuery.

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

2. Add the data-checkem="all" attribute to the Check All checkbox.

<form>
  <label>
    <input type="checkbox" data-checkem="all"><strong> Check all</strong> 
  </label>
  <label>
    <input type="checkbox"> Single Item</label>
  <label>
  <label>
    <input type="checkbox"> Single Item
  </label>
  ...
</form>

3. Call the function checkem() on the form and the plugin will do the rest.

$(function(){ 
  $('form').checkem();
});

4. Establish and manage parent-child relationships between nested checkbox groups using the data-checkem-parent attribute.

<form>
  <label>
    <input type="checkbox" data-checkem="all"><strong> Check all</strong>
  </label>
  <label>
    <input type="checkbox"> Single Item</label>
  <label>
  <input type="checkbox" name="nest"> Nested Item</label>
  <ul>
    <li><label><input type="checkbox" data-checkem-parent="nest"> Child A </label></li>
    <li><label><input type="checkbox" data-checkem-parent="nest"> Child B </label></li>
    <li>
      <label><input type="checkbox" name="childc" data-checkem-parent="nest"> Child C </label>
      <ul>
        <li><label><input type="checkbox" name="childc1" data-checkem-parent="childc"> Child C-1</label>
          <ul>
            <li><label><input type="checkbox" data-checkem-parent="childc1"> Child C-1-1</label></li>
            <li><label><input type="checkbox" data-checkem-parent="childc1"> Child C-1-2</label></li>
          </ul>
        </li>
        <li><label><input type="checkbox" name="childc2" data-checkem-parent="childc"> Child C-2</label></li>
      </ul>
    </li>
  </ul>
  <label><input type="checkbox"> Single Item</label>
</form>

---

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