Easiest “check all” ever with jQuery
Reading time: About 1 minute
How does it work?
This code checks/unchecks all checkboxes within the same fieldset. Simple and semantic.
Example completed code
See this in action and view the source if you’d like.
HTML Setup
Add checkboxes however you like, just make sure they are within the same fieldset.
1 2 3 4 5 6 7 8 9 10 11 12 13 <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 fieldset <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!!
Updated: Thanks to comments from k3n and Nate I was able to streamline the original code even more! K3n’s code in particular was genius*2.
1 2 3 4 5 $(function () { // this line makes sure this code runs on page load $('.checkall').click(function () { $(this).parents('fieldset:eq(0)').find(':checkbox').attr('checked', this.checked); }); });
1009
24 comments skip to comment form
saurabh shah said— 2 hours later
Ed Foh said— 6 hours later
Motti said— 11 hours later
Gareth said— 13 hours later
Nate said— 1 day later
k3n said— 1 day later
Phillip Senn said— 1 day later
Brian Cray said— 2 days later
Gem said— 1 week later
CoryMathews said— 2 weeks later
Brian Cray said— 2 weeks later
Beaute said— 3 months later
cudi said— 3 months later
gold7 said— 4 months later
Chad Huntley said— 5 months later
seo said— 5 months later
Caleb said— 6 months later
mojito said— 6 months later
downtroden said— 7 months later
Brian Cray said— 7 months later
downtroden said— 7 months later
Zdenka said— 8 months later
Trevor Saint said— 11 months later
Ayel said— on August 6, 2009 later
Respond to this post—