Turn On And Off All Checkboxes With jQuery - multiCheck

File Size: 6.59 KB
Views Total: 1482
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Turn On And Off All Checkboxes With jQuery - multiCheck

multiCheck is a jQuery plugin which enables a checkbox to select and clear all of its related checkboxes on click. Tri-state is supported if at least one of its related checkboxes is checked.

How to use it:

1. Create a group of checkbox inputs on the page.

<ul class="list-group">
  <li class="list-group-item"><label><input type="checkbox" class="listCheckbox" /> Cras justo odio</label></li>
  <li class="list-group-item"><label><input type="checkbox" class="listCheckbox" /> Dapibus ac facilisis in</label></li>
  <li class="list-group-item"><label><input type="checkbox" class="listCheckbox" /> Morbi leo risus</label></li>
  <li class="list-group-item"><label><input type="checkbox" class="listCheckbox" /> Porta ac consectetur ac</label></li>
  <li class="list-group-item"><label><input type="checkbox" class="listCheckbox" /> Vestibulum at eros</label></li>
</ul>

2. Create a 'Check All' checkbox input.

<input type="checkbox" id="mainCheckbox" /> Check/Uncheck All

3. Place the JavaScript library jquery.multicheck.js after jQuery JavaScript library.

<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous">
</script>
<script src="jquery.multicheck.js"></script>

4. Enable the plugin and done.

( function( $ ) {
  $( '#mainCheckbox' ).multicheck( $( '.listCheckbox' ) );
})( jQuery );

This awesome jQuery plugin is developed by rashid2538. For more Advanced Usages, please check the demo page or visit the official website.