Check All & Indeterminate Checkbox Plugin With jQuery - ssdThreeStateCheckbox

ssdThreeStateCheckbox is a jQuery plugin which enables a checkbox to check/clear all of its related checkboxes, with support for 'tri-state' using the HTML5 "indeterminate" property.

Installation:

# NPM
$ npm install three-state-checkbox --save

How to use it:

1. Create the 'master' checkbox and its child elements as these:

<input
  type="checkbox"
  class="checkboxMaster"
  data-group-master="checkboxRemove"
>

<input
  type="checkbox"
  class="checkboxRecord"
  data-group-record="checkboxRemove"
  data-id="1"
>

<input
  type="checkbox"
  class="checkboxRecord"
  data-group-record="checkboxRemove"
  data-id="2"
>

<input
  type="checkbox"
  class="checkboxRecord"
  data-group-record="checkboxRemove"
  data-id="3"
>

2. Include the JavaScript file jquery.ssdThreeStateCheckbox.js after jQuery library but before the closing body tag.

<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="jquery.ssdThreeStateCheckbox.js"></script>

3. Call the function on document ready. Done.

$(function() {
  $(document).ssdThreeStateCheckbox();
});

4. Customize the plugin by overriding the following default options.

$(document).ssdThreeStateCheckbox({
  classButton         : 'checkboxButton',
  classMaster         : 'checkboxMaster',
  classRecord         : 'checkboxRecord',

  dataGroupButton     : 'group-button',
  dataGroupMaster     : 'group-master',
  dataGroupRecord     : 'group-record',
  dataGroupRecordId   : 'id',

  clickCallback       : function(ids, trigger) {

    console.log("clickCallback method call : collected [" + ids + "]");

  }
});

Change log:

v1.2.1 (2017-10-25)

• Master checkbox should be updated on landing
• Incoherent statuses of Master checkbox

---

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