jQuery Plugin For Checking All The Checkboxes - checkallbox

A simple but useful jQuery plugin that offers a check all button for users to check all the checkboxes with one click.

How to use it:

1. Include jQuery Library and checkallbox.js

<script src="libs/jquery/jquery.js"></script>
<script src="src/jquery.checkallbox.js"></script>

2. Add a check-all-button

<button class="toggle">Add checkallbox</button>

3. Create a form with multi checkboxes

<form>
<fieldset>
<legend>Options</legend>
<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>
<p>
<label>
<input type="checkbox" name="option_3" value="1" disabled="disabled">
</input>
Option 3</label>
</p>
</fieldset>
<footer> <small>N.B. shift+click checkbox to disable/enable.</small> </footer>
</form>

4. Call the plugin

<script type="text/javascript">
    $(function() {
      var $form, $checkallbox;

      $('button.toggle').toggle(function() {
        $button = $(this);
        $form   = $button.parents('section').find('form');
        $('<input type="checkbox"/>').prependTo($form.find('legend')).checkallbox({scope: 'fieldset'});
        $form.find('legend').wrapInner($('<label></label>'))
        $(this).text('Remove checkallbox');
      }, function() {
        $button = $(this);
        $form   = $button.parents('section').find('form');
        $form.find('legend label').each(function(event) {
          $(this).replaceWith($(this).text());
        });
        $button.text('Add checkallbox');
      });

      $('form p label').on('click', function(event) {
        var $checkbox = $(this).find(':checkbox');
        if (event.shiftKey) {
          $checkbox.prop('disabled', !$checkbox.prop('disabled'));
          $checkallbox = $checkbox.parents('fieldset').find('legend input:checkbox');
          $checkallbox.checkallbox('update');
          event.preventDefault();
        }

      })
    });
</script>

---

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