Check/Uncheck All Related Checkboxes - jQuery create-checkall
File Size: | 5.27 KB |
---|---|
Views Total: | 1697 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
Just another jQuery 'Check All' plugin that enables a checkbox to check/uncheck all of its child checkboxes when checked/unchecked.
How to use it:
1. Load the minified version of the jQuery create-checkall plugin after jQuery library.
<script src="//code.jquery.com/jquery.min.js"></script> <script src='jquery-create-checkall.min.js'></script>
2. Group your checkboxes with the same CSS class as these:
<label><input type="checkbox" class="checkbox-label-around" value="one" checked><span class="label-text">One</span></label> <label><input type="checkbox" class="checkbox-label-around" value="two" checked><span class="label-text">Two</span></label> <label><input type="checkbox" class="checkbox-label-around" value="three" checked><span class="label-text">Three</span></label> <label><input type="checkbox" class="checkbox-label-around" value="four" checked><span class="label-text">Four</span></label>
3. Call the function to generate a 'Check All' checkbox before the checkbox group.
$('.checkbox-label-around').createCheckAll({ label: 'Custom label here' });
4. To config the 'Check All' checkbox, override the following options values and pass them as an object to the createCheckAll
function.
$('.checkbox-label-around').createCheckAll({ // target selector allSelector: null, // adds a <br> after the check all checkbox breakAfter: false, // additional CSS classes classes: null, // additional CSS IDs id: null, // custom label text label: 'All', // or 'after' position: 'before' });
This awesome jQuery plugin is developed by andreoliva. For more Advanced Usages, please check the demo page or visit the official website.