jQuery Check/Uncheck All Checkboxes Plugin - Checkall

File Size: 108KB
Views Total: 2336
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Check/Uncheck All Checkboxes Plugin - Checkall

Checkall is a human-friendly jQuery form plugin that allows to check, uncheck and reverse a group of checkboxes by clicking the parent checkbox, radio button or even a link. The plugin currently provides 2 ways to implement the check all functionality on your checkboxes: add data-* attributes to the controls or call the function in the javascript.

You might also like:

Basic Usage:

1. Create a group of checkboxes and some links with data-* attributes.

<h3>Programming Languages</h3>
<ul>
  <li><label><input type="checkbox" name="room" value="C" />C</label></li>
  <li><label><input type="checkbox" name="room" value="Java" />Java</label></li>
  <li><label><input type="checkbox" name="room" value="PHP" />PHP</label></li>
  <li><label><input type="checkbox" name="room" value="JavaScript" />JavaScript</label></li>
  <li><label><input type="checkbox" name="room" value="Python" />Python</label></li>
  <li><label><input type="checkbox" name="room" value="Ruby" />Ruby</label></li>
  <li><label><input type="checkbox" name="room" value="C++" />C++</label></li>
</ul>

<label><input type="checkbox" data-toggle="checkall" data-target="input[name=room]" />Check All</label>
<a href="javascript:;" data-toggle="checkall" data-target="input[name=room]" data-checked="true">All</a> /
<a href="javascript:;" data-toggle="checkall" data-target="input[name=room]" data-reverse="true">Reverse</a>

2. Load the jQuery javascript library and jQuery checkall plugin at the end of the page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="dist/jquery.checkall.js"></script>

3. That's it. You can also call the checkall function in the javascript instead of adding the data-* attributes.

<script>
$('#check-all').checkAll({
  target:    '',
  reverse:   true / false,
  checked:   null / true / false,
  sync:      true / false
});
</script>

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