jQuery.checkallbox

A jQuery plugin that quite literally checks all the boxes; apply it to a checkbox to bulk check/uncheck groups of checkboxes.

Getting Started

Download the production version or the development version.

In your web page:

<script src="jquery.js"></script>
<script src="dist/jquery.checkallbox.min.js"></script>

<form>
  <header>Options</header>
  <p>
    <label><input type="checkbox" name="option_1" value="1"></input>Option 1</label>
  </p>
  <p>
    <label><input type="checkbox" name="option_2" value="1"></input>Option 2</label>
  </p>
</form>

<script>
jQuery(function($) {
  var $form        = $('form');
  var $checkallbox = $('<input type="checkbox"/>')
                       .prependTo($form.find('header'))
                       .checkallbox();
  $form.find('header').wrapInner($('<label></label>'));
});
</script>

By default each checkallbox is scoped to its parent form, but if you need multiple separate groupings of checkboxes each controlled by their own checkallboxes you can pass a custom scope selector:

<script>
jQuery(function($) {
  var $form          = $('form');
  var $checkallboxes = $('<input type="checkbox"/>')
                         .prependTo($form.find('fieldset legend'))
                         .checkallbox({scope: 'fieldset'});
  $form.find('fieldset legend').wrapInner($('<label></label>'));
});
</script>

Demo

See demo.html or here for examples of jQuery.checkallbox in action.

Release History

v1.2.0

• Convert to Constructor architecture and guard against multiple initialisation - #5
• Expose public 'update' method - #6
• Set checkallbox state to 'indeterminate' when checkboxes not all checked or unchecked - #7
• Namespaced event handler - #8

v1.1.0

• Added scope option - #3
• Updated specs for IE8- compatibility - #4

v1.0.1

• Fixed issue with checkallbox checked state when checkboxes disabled - #1

v1.0.0

• Initial release