jQuery Check/Uncheck All Checkboxes Plugin - Checkall
File Size: | 108KB |
---|---|
Views Total: | 2336 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
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:
- jQuery Plugin For Checking All The Checkboxes
- Use Shift Selection For Checkboxes - Tshift
- Simple Form Check All Plugin For jQuery
- Simple jQuery Plugin To Select All The Checkboxes - select-all
- jQuery Plugin For Checkbox Group Functionality - cbFamily
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.