This time I will share jQuery Plugin and tutorial about Create Dependent Checkboxes With jQuery – ParentCheckBox, hope it will help you in programming stack.
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.
2 |
integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" |
3 |
crossorigin="anonymous"> |
5 |
<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.
01 |
<input type="checkbox" name="test-1" id="elementOne" /> |
02 |
<label for="elementOne"> |
06 |
<input type="checkbox" name="test-2" id="elementTwo" /> |
07 |
<label for="elementTwo"> |
11 |
<input type="checkbox" name="test-3" id="elementThree" /> |
12 |
<label for="elementThree"> |
16 |
... more checkboxes here ... |
1 |
$( document ).ready(function() { |
3 |
$("#elementTwo").parentCheckBox("#elementOne"); |
4 |
$("#elementThree").parentCheckBox("#elementTwo"); |
3. Customize the parent element.
1 |
$("#elementTwo").parentCheckBox("#elementOne",{ |
4. Determine whether to disable the checkbox if checked.
1 |
$("#elementTwo").parentCheckBox("#elementOne",{ |
This awesome jQuery plugin is developed by TIMDM. For more Advanced Usages, please check the demo page or visit the official website.
