checkem.js is a light-weight and easy-to-use jQuery plugin to simplify the parent-child relationship amongst checkboxes.
When a “mum or dad” checkbox is checked, all “youngster” checkboxes inside that group are robotically checked. Equally, if all youngster checkboxes in a bunch are checked, the mum or dad checkbox can also be checked.
As well as, the plugin helps nested checkboxes, which makes it completely suited to complicated types and interactive lists.
See Additionally:
Find out how to use it:
1. To get began, embody the minified model 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 Verify All checkbox.
<type>
<label>
<enter sort="checkbox" data-checkem="all"><robust> Verify all</robust>
</label>
<label>
<enter sort="checkbox"> Single Merchandise</label>
<label>
<label>
<enter sort="checkbox"> Single Merchandise
</label>
...
</type>
3. Name the perform checkem() on the shape and the plugin will do the remaining.
$(perform(){
$('type').checkem();
});
4. Set up and handle parent-child relationships between nested checkbox teams utilizing the data-checkem-parent attribute.
<type>
<label>
<enter sort="checkbox" data-checkem="all"><robust> Verify all</robust>
</label>
<label>
<enter sort="checkbox"> Single Merchandise</label>
<label>
<enter sort="checkbox" title="nest"> Nested Merchandise</label>
<ul>
<li><label><enter sort="checkbox" data-checkem-parent="nest"> Youngster A </label></li>
<li><label><enter sort="checkbox" data-checkem-parent="nest"> Youngster B </label></li>
<li>
<label><enter sort="checkbox" title="childc" data-checkem-parent="nest"> Youngster C </label>
<ul>
<li><label><enter sort="checkbox" title="childc1" data-checkem-parent="childc"> Youngster C-1</label>
<ul>
<li><label><enter sort="checkbox" data-checkem-parent="childc1"> Youngster C-1-1</label></li>
<li><label><enter sort="checkbox" data-checkem-parent="childc1"> Youngster C-1-2</label></li>
</ul>
</li>
<li><label><enter sort="checkbox" title="childc2" data-checkem-parent="childc"> Youngster C-2</label></li>
</ul>
</li>
</ul>
<label><enter sort="checkbox"> Single Merchandise</label>
</type>
This superior jQuery plugin is developed by lancevo. For extra Superior Usages, please test the demo web page or go to the official web site.
