Written by Brian Cray on August 6th, 2009
How does it work?
This code checks/unchecks all checkboxes within the same fieldset. Simple and semantic.
HTML Setup
Add checkboxes however you like, just make sure they are within the same fieldset.
<fieldset>
<!-- these will be affected by check all -->
<div><input type="checkbox" class="checkall"> Check all</div>
<div><input type="checkbox"> Checkbox</div>
<div><input type="checkbox"> Checkbox</div>
<div><input type="checkbox"> Checkbox</div>
</fieldset>
<fieldset>
<!-- these won't be affected by check all; different field set -->
<div><input type="checkbox"> Checkbox</div>
<div><input type="checkbox"> Checkbox</div>
<div><input type="checkbox"> Checkbox</div>
</fieldset>
The "check all" jQuery
I must say this is genius… and fast! I spent a lot of time tweaking this code for performance and brevity. Enjoy!!
$(function () {
$('.checkall').on('click', function () {
$(this).closest('fieldset').find(':checkbox').prop('checked', this.checked);
});
});