This time I will share jQuery Plugin and tutorial about Check All Related Checkboxes – jQuery jCheckBox, hope it will help you in programming stack.
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.
1 |
<script src="/path/to/cdn/jquery.min.js"></script> |
2 |
<script src="/path/to/dist/jquery.jCheckBox.min.js"></script> |
2. Create a ‘Parent’ checkbox for checkbox groups as follows:
01 |
<div class="languages"> |
03 |
<input type="checkbox" id="1" value="1"> |
04 |
<label for="1">Manage Student</label> |
07 |
<input type="checkbox" id="2" value="2" class="parent-1"> |
08 |
<label for="2">JavaScript</label> |
11 |
<input type="checkbox" id="3" value="3" class="parent-1"> |
12 |
<label for="3">XML/HTML5</label> |
15 |
<input type="checkbox" id="4" value="4" class="parent-1"> |
16 |
<label for="3">CSS/CSS3</label> |
3. Attach the function jCheckBox to the top container. That’s it.
1 |
let instance = $("#languages").jCheckBox(); |
4. Check/uncheck all checkboxes programmatically.
5. Uncheck a specified checkbox .
6. Disable the Check All checkbox.
1 |
let instance = $("#languages").jCheckBox({ |
7. Override the default CSS selector of the Check All checkbox. Default: ‘parent’.
1 |
let instance = $("#languages").jCheckBox({ |
2 |
parentClass: "customParent" |
8. Available callback functions.
01 |
let instance = $("#languages").jCheckBox({ |
02 |
onParentChecked: function() { |
05 |
onChildChecked: function() { |
08 |
onParentUnchecked: function() { |
11 |
onChildUnchecked: function() { |
Changelog:
2020-02-25
This awesome jQuery plugin is developed by james-muriithi. For more Advanced Usages, please check the demo page or visit the official website.
