jQuery Plugin For Checking All The Checkboxes - checkallbox

File Size: 113KB
Views Total: 2181
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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

<input type="checkbox" name="option_1" value="1">
Option 1</label>
<input type="checkbox" name="option_2" value="1">
Option 2</label>
<input type="checkbox" name="option_3" value="1" disabled="disabled">
Option 3</label>
<footer> <small>N.B. shift+click checkbox to disable/enable.</small> </footer>

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'});
        $(this).text('Remove checkallbox');
      }, function() {
        $button = $(this);
        $form   = $button.parents('section').find('form');
        $form.find('legend label').each(function(event) {
        $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');


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