jQuery.checkallbox

A jQuery plugin that quite literally checks all the boxes.

View the Project on GitHub

What's all this about then?

jQuery.checkallbox gives you checkboxes that can control other groups of checkboxes, allowing you to check and uncheck them en masse.

Demo

Options

N.B. shift+click checkbox to disable/enable.

Usage

Download the production version or the development version.

In the <head> or <body> of your web page:

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

Then, given a <form> with a number of checkboxes:

<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>

Inject a <input type="checkbox"> into your form to be used as the check all box and call checkallbox() on it:

<script type="text/javascript">
  $(document).ready({
    var checkallbox = $('<input type="checkbox"/>')
                         .prependTo($('form header'))
                         .checkallbox();
  });
</script>

So that users can also control the checkallbox by clicking on its associated header text, be sure to wrap the checkallbox header text in a <label> element, like so:

$('form header').wrapInner($('<label/>'));

More info

For more info, see the README.