Create Dependent Checkboxes With jQuery - ParentCheckBox

A jQuery plugin for dependent checkboxes that automatically check/uncheck a checkbox depending on the state of other related checkbox inputs.

A typical use of this plugin is to check/uncheck all child checkbox inputs once the parent checkbox is checked or unchecked.

How to use it:

1. Download and put the JavaScript file ParentCheckBox.plugin.js after jQuery.

<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous">
</script>
<script src="src/ParentCheckBox.plugin.js"></script>

2. Attach the plugin to the checkbox and pass the target checkbox parameter to the parentCheckBox function and done.

<input type="checkbox" name="test-1" id="elementOne" />
<label for="elementOne">
  Element 1
</label>

<input type="checkbox" name="test-2" id="elementTwo" />
<label for="elementTwo">
  Element 2
</label>

<input type="checkbox" name="test-3" id="elementThree" />
<label for="elementThree">
  Element 3
</label>

... more checkboxes here ...

$( document ).ready(function() {

  $("#elementTwo").parentCheckBox("#elementOne");
  $("#elementThree").parentCheckBox("#elementTwo");
  
  // more instances here

});

3. Customize the parent element.

$("#elementTwo").parentCheckBox("#elementOne",{
  parentElement: null
});

4. Determine whether to disable the checkbox if checked.

$("#elementTwo").parentCheckBox("#elementOne",{
  mandatory: true
});

---

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