Skip to content

liveline/jquery-checkallbox

Repository files navigation

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