Check/Uncheck All Related Checkboxes - jQuery create-checkall

File Size: 5.27 KB
Views Total: 1686
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Check/Uncheck All Related Checkboxes - jQuery create-checkall

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.