jQuery CheckThemAll

• Load latest jQuery library
• Load js/jquery-checkthemall.min.js
• Instantiate CheckThemAll on a DOM element wrapping a list of checkboxes :

  $('#checkbox_container').checkThemAll();
  

• CheckThemAll uses classes to identify the role of each checkbox. By default, those classes are : .master-checkbox and .slave-checkbox. Here's an example:

  <div id="checkbox_container">
  
    <input type="checkbox" class="master-checkbox" id="master" name="master" />
    <label for="master">All</label>
  
    <input type="checkbox" class="slave-checkbox" id="slave1" name="slave1" />
    <label for="slave1">Choice 1</label>
  
    <input type="checkbox" class="slave-checkbox" id="slave2" name="slave2" />
    <label for="slave2">Choice 2</label>
  
    <input type="checkbox" class="slave-checkbox" id="slave3" name="slave3" />
    <label for="slave3">Choice 3</label>
  
    <input type="checkbox" class="slave-checkbox" id="slave4" name="slave4" />
    <label for="slave4">Choice 4</label>
  
    <input type="checkbox" class="slave-checkbox" id="slave5" name="slave5" />
    <label for="slave5">Choice 5</label>
  
  </div>
  

In most cases, you won't need extra configuration for CheckThemAll to work properly. In some cases though, you might need to change the default parameters to meet your specific needs. There are two ways to set parameters:

• As data- attribute in the <container> element.
• As argments when instantiating the plugin in your JS file.

Let's take an example with the masterCheckboxClass parameter (described below), you can set it either in your container element:

<div id="checkbox_container" data-checkthemall-mastercheckboxclass="some-class">
  ...
</div>

Or when instantiating the plugin:

$('.checkthemall').checkThemAll({
  masterCheckboxClass: 'some-class'
});

Here is the full (but short) list of available parameters, along with their default values. To use them as data- attributes, simply prefix with data-checkthemall-

Note Parameters expecting functions cannot be used as data- attributes.

defaults = {
  masterCheckboxClass: 'master-checkbox',
  slaveCheckboxClass: 'slave-checkbox',
  onCheckBefore: function() { return; },
  onCheckAfter: function() { return; },
  onUncheckBefore: function() { return; },
  onUncheckAfter: function() { return; },
  onMasterCheckBefore: function() { return; },
  onMasterCheckAfter: function() { return; },
  onMasterUncheckBefore: function() { return; },
  onMasterUncheckAfter: function() { return; },
  onSlaveCheckBefore: function() { return; },
  onSlaveCheckAfter: function() { return; },
  onSlaveUncheckBefore: function() { return; },
  onSlaveUncheckAfter: function() { return; },
}

You can hook to pre and post checking events to perform certain tasks.

Hooks receive 3 parameters :

• container: The DOM element wrapping the checkboxes.
• element: The DOM element being checked or unchecked.
• options: The list of options tied to the CheckThemAll instance.

Available hooks are :

• onCheckBefore
  Triggered right before any checkbox is checked by the plugin.
• onCheckAfter
  Triggered right after any checkbox is checked by the plugin.
• onUncheckBefore
  Triggered right before any checkbox is unchecked by the plugin.
• onUncheckAfter
  Triggered right after any checkbox is unchecked by the plugin.
• onMasterCheckBefore
  Triggered right before a master checkbox is checked by the plugin.
• onMasterCheckAfter
  Triggered right after a master checkbox is checked by the plugin.
• onMasterUncheckBefore
  Triggered right before a master checkbox is unchecked by the plugin.
• onMasterUncheckAfter
  Triggered right after a master checkbox is unchecked by the plugin.
• onSlaveCheckBefore
  Triggered right before a slave checkbox is checked by the plugin.
• onSlaveCheckAfter
  Triggered right after a slave checkbox is checked by the plugin.
• onSlaveUncheckBefore
  Triggered right before a slave checkbox is unchecked by the plugin.
• onSlaveUncheckAfter
  Triggered right after a slave checkbox is unchecked by the plugin.

Basic Usage

$('.checkthemall').checkThemAll();

<div class="checkthemall">

    <input type="checkbox" class="master-checkbox" id="master" name="master" />
    <label for="master">All</label>

    <input type="checkbox" class="slave-checkbox" id="slave1" name="slave1" />
    <label for="slave1">Choice 1</label>

    <input type="checkbox" class="slave-checkbox" id="slave2" name="slave2" />
    <label for="slave2">Choice 2</label>

    <input type="checkbox" class="slave-checkbox" id="slave3" name="slave3" />
    <label for="slave3">Choice 3</label>

    <input type="checkbox" class="slave-checkbox" id="slave4" name="slave4" />
    <label for="slave4">Choice 4</label>

    <input type="checkbox" class="slave-checkbox" id="slave5" name="slave5" />
    <label for="slave5">Choice 5</label>

</div>

Hooks

$('.checkthemall').checkThemAll({
  onSlaveCheckAfter: function(container, element, options) {
    var msg = 'You checked Slave Element: ' + element.next('label').html();
    var console_item = $('<p class="slave check" />').html(msg);
    container.find('.console').prepend(console_item);
    setTimeout(function() { console_item.fadeOut() }, 5000)
  },
  onMasterCheckAfter: function(container, element, options) {
    var msg = 'You checked Master Element: ' + element.next('label').html();
    var console_item = $('<p class="master check" />').html(msg);
    container.find('.console').prepend(console_item);
    setTimeout(function() { console_item.fadeOut() }, 5000)
  },
  onSlaveUncheckAfter: function(container, element, options) {
    var msg = 'You unchecked Slave Element: ' + element.next('label').html();
    var console_item = $('<p class="slave uncheck" />').html(msg);
    container.find('.console').prepend(console_item);
    setTimeout(function() { console_item.fadeOut() }, 5000)
  },
  onMasterUncheckAfter: function(container, element, options) {
    var msg = 'You unchecked Master Element: ' + element.next('label').html();
    var console_item = $('<p class="master uncheck"/>').html(msg);
    container.find('.console').prepend(console_item);
    setTimeout(function() { console_item.fadeOut() }, 5000)
  }
});

$('.checkthemall').checkThemAll({
  onMasterCheckAfter: function(container, element, options) {
    container.find('.slave-checkbox').each(function() {
      $(this).attr('disabled', 'disabled');
      $(this).next('label').attr('disabled', 'disabled').css('color', '#ccc');
    });
  },
  onMasterUncheckAfter: function(container, element, options) {
    container.find('.slave-checkbox').each(function() {
      $(this).removeAttr('disabled');
      $(this).next('label').removeAttr('disabled').css('color', '#000000');
    });
  }
});