Minimal Select All Checkboxes Plugin With jQuery - checkall

Yet another lightweight jQuery Check All jQuery plugin which enables a checkbox to select and deselect all related checkboxes with one click. When the child checkboxes are individually checked/unchecked, the 'Check All' checkbox's status will update accordingly between checked and unchecked.

How to use it:

1. Add the 'Check All' checkbox and its child checkboxes into a container element.

<div class="checkall">
  
  <input type="checkbox" class="checkall__all">

  <input type="checkbox" class="checkall__item">
  <input type="checkbox" class="checkall__item">
  <input type="checkbox" class="checkall__item">
  ...

</div>

2. Put jQuery library and the jQuery checkall plugin's script at the bottom of the page.

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

3. Enable the 'Check All' checkbox by calling the function on the top container.

$(function() {
  $('.checkall').checkall();
});

4. To change the default CSS selectors of the Check All and Child checkboxes.

$(function() {
  $('.checkall').checkall({
    all:  '.checkall__all',
    item: '.checkall__item'
  });
});

---

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