Select All Checkboxes With A Single Checkbox - jQuery checkboxAll

File Size: 5.47 KB
Views Total: 13395
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Select All Checkboxes With A Single Checkbox - jQuery checkboxAll

Just another jQuery Check All plugin which enables a 'Master' checkbox to select/unselect all the related (children) checkbox inputs with just one click.

How to use it:

1. Add the all CSS class to the first checkbox as these:

<div class="example">
  <div>
    <input type="checkbox" name="selectall-demo" id="selectall1" class="all" value="1">
    <label for="selectall1">Select all</label>
  </div>
  <div>
    <input type="checkbox" name="check[]" id="check1" value="1">
    <label for="check1">1. checkbox</label>
  </div>
  <div>
    <input type="checkbox" name="check[]" id="check2" value="2">
    <label for="check2">2. checkbox</label>
  </div>
  <div>
    <input type="checkbox" name="check[]" id="check3" value="3">
    <label for="check3">3. checkbox</label>
  </div>
  <div>
    <input type="checkbox" name="check[]" id="check4" value="4">
    <label for="check4">4. checkbox</label>
  </div>
</div>

2. Download the jQuery checkboxAll plugin and insert the JavaScript file jquery.checkboxall.min.js after jQuery.

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" 
        integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 
        crossorigin="anonymous">
        </script>
<script src="jquery.checkboxall-1.0.min.js"></script>

3. Call the function on the parent container and done.

$(document).ready(function() {
  $('.example').checkboxall();
})

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