http://markgx.github.io/jquery-check-all
A jQuery plugin which allows you to quickly add check all/uncheck all functionality to your forms or tables.
Source is available on GitHub.
Include jQuery and the script somewhere on your page.
<script src="jquery.js"></script>
<script src="jquery-check-all.js"></script>
You'll have markup which contains your checkboxes, for example:
<table>
<thead>
<tr>
<td><input id="check-all" type="checkbox"></td>
<td></td>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" value="1"></td>
<td>option 1</td>
</tr>
<tr>
<td><input type="checkbox" value="2"></td>
<td>option 2</td>
</tr>
<tr>
<td><input type="checkbox" value="3"></td>
<td>option 3</td>
</tr>
</tbody>
</table>
Call the checkAll()
function on your "check all" checkbox to initialize the plugin.
<script>
$(document).ready(function() {
$('#check-all').checkAll();
});
</script>
The plugin can be supplied with an options object to further filter which checkboxes you want to group.
var options = { container: $('#table'), showIndeterminate: true };
$('#check-all-box').checkAll(options);
Alternatively, options may be supplied via data attributes. Note that options passed via the options object will override any options specified via data attributes.
<input id="check-all" type="checkbox" data-show-indeterminate="true">
Available options:
- container: A selector string or jQuery object of the element which contains the children checkboxes. Defaults to
document
. - childCheckboxes: A selector string or jQuery object of the children checkboxes. Defaults to
input[type=checkbox]
. Note: if you supply this option, make sure what you're passing are checkboxes. - showIndeterminate: a boolean which specifies whether to display the check all checkbox in the indeterminate state if a subset of the children checkboxes are selected.
- jQuery 1.7+/2.0+
Released under the MIT License.