jQuery Plugin For Checking All The Checkboxes - checkallbox
File Size: | 113KB |
---|---|
Views Total: | 2131 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.