Advanced Check/Uncheck All Plugin - jQuery checkAll.js

An advanced check all jQuery plugin that enables a Check All control to check & uncheck all of its child checkboxes when checked/unchecked.

Use this plugin to select/check all elements within a content block such as checkboxes, table rows, HTML lists, etc.

How to use it:

1. Create a Check All checkbox for a group of child checkes as follows:

<label class="checkbox">
  <input type="checkbox" class="checkAll">
  <span class="checkbox-label">Check All</span>
</label>

<label class="checkbox">
  <input type="checkbox" name="checkGroup" value="1">
  <span class="checkbox-label">Checkbox 1</span>
</label>

<label class="checkbox">
  <input type="checkbox" name="checkGroup" value="2">
  <span class="checkbox-label">Checkbox 2</span>
</label>

<label class="checkbox">
  <input type="checkbox" name="checkGroup" value="3">
  <span class="checkbox-label">Checkbox 3</span>
</label>

...

2. Insert the minified version of the jQuery checkAll.js plugin after jQuery.

<script src="/path/to/jquery.slim.min.js"></script>
<script src="/path/to/checkAll.min.js"></script>

3. Initialize the plugin on the Check All checkbox and define the input name of the child checkboxes.

$('.checkAll').checkAll({
  name: 'checkGroup'
});

4. Apply a CSS class to the Check All checkbox when it is in the indeterminate state.

$('.checkAll').checkAll({
  name: 'checkGroup',
  vagueCls: 'indeterminate'
});

5. You can also apply the Check All functionality to any trigger elements using the checkAll class.

<button class="checkAll">Check All</button>

6. Enable a control to invert the selection.

<button class="invert">Invert</button>

$('.checkAll').checkAll({
  name: 'checkGroup',
  inverter: '.invert'
});

7. Get the result of selected data using the following callbacks.

$('.checkAll').checkAll({
  name: 'checkGroup',
  inverter: '.invert',
  onInit : function(len,count,ids,nodes,value){
    // params : len, count, length , ids, value, nodes
    console.log(len+' items, checked '+count+' item');
  },
  onCheck: function(id,val,len,count,ids,nodes,value){
    // params : id,val,len,count,ids,value,nodes
    console.log(len+' items, checked '+count+' item');
  },
  onFull : function (count,ids,nodes) {
    // params : count|len, length , ids, value, nodes
    console.log(count+' items, checked '+count+' item');
  },
  onEmpty : function (len) {
    // params : len
    console.log(len+' items, checked 0 item');
  }
});

8. Or using the getResult method.

var instance = $('.checkAll').checkAll({
    name: 'checkGroup'
});

var result = instance.getResult();

result = {
  len   : _len,   // item length
  count : _count, // count
  index : _index, // index
  nodes : _nodes, // nodes
  value : _value  // value set
}

---

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