24 comments skip to comment form

1. 

   saurabh shah said— 2 hours later

   clean n handy .. nice brian …

   #1
2. 

   Ed Foh said— 6 hours later

   Good stuff!

   #2
3. 

   Motti said— 11 hours later

   very nice and clean code! i am just starting to get more into jQuery. thanks for the heads up!

   #3
4. 

   Gareth said— 13 hours later

   Oh that’s a good one! nice work!

   #4
5. 

   Nate said— 1 day later

   Here is something briefer, more generic and just as fast:
   $(function () {
   $(‘fieldset :checkbox.checkAll’).click(function() {
   $(this).parents(‘fieldset:eq(0)’).find(‘:checkbox’).attr(‘checked’, $(this).attr(‘checked’));
   });
   });

   This will turn any checkbox in a fieldset with the class checkAll into a checkbox that checks/unchecks all checkboxes in the fieldset.

   #5
6. 

   k3n said— 1 day later

   Be careful claiming to have the “easiest” solution, or calling your own code “genius”…

   $(‘#checkall’).click(function () {
   $(this).parent().siblings().find(‘:checkbox’).attr(‘checked’, this.checked);
   });

   It would be much simplier if not for the superflous div’s you have. Without the div’s, one could omit the parent() and find() calls, and instead use siblings(‘:checkbox’).

   Also, please note that my version ONLY operates on checkboxes; yours will attempt to check any form input element. Not saying it’ll break anything, but it’s extra work that can be avoided.

   It’s been tested many times before, but for an attribute like ‘checked’, its much faster to just set the value (whether or not you are changing it). Additionally, there’s no need to remove the ‘checked’ attribute; simply set it to false.

   Lastly, your example makes a very bad mistake: you introduce 2 global variables.

   I applaud your attempt to educate others though, good luck in your endeavors.

   #6
7. 

   Phillip Senn said— 1 day later

   Well, one benefit of posting your code is others can look at it and make improvements.

   #7
8. 

   Brian Cray said— 2 days later

   K3n & Nate – thanks for the great ways to optimize the code!

   K3n – There is almost always an element containing inputs for styling purposes. Just calling upon the parent() only—while perhaps a better performer marginally—restricts the flexibility of the form’s DOM structure. I’ve adapted your code to my original code and come up with what I think is now the best solution

   #8
9. 

   Gem said— 1 week later

   Its great

   #9
10. 

    CoryMathews said— 2 weeks later

    Works great.

    A side note: your js for the loading button (sitewide) does not work at all in opera. I cannot click on your links… Not very user friendly.

    #10
11. 

    Brian Cray said— 2 weeks later

    Thanks for the info Cory – will check it out

    #11
12. 

    Beaute said— 3 months later

    Very usefull ! thank you

    #12
13. 

    cudi said— 3 months later

    this is hot

    #13
14. 

    gold7 said— 4 months later

    So easy. Thanks!

    #14
15. 

    Chad Huntley said— 5 months later

    It would make more sense to break these up by using different classes then fieldsets. You can assign multiple classes to each checkbox which will allow you to pick and chose which you want checked no matter what fieldset it is in.

    http://elementdesignllc.com/2009/12/jquery-select-all-checkboxes/

    #15
16. 

    seo said— 5 months later

    thanx perfect

    #16
17. 

    Caleb said— 6 months later

    Check out the ‘closest’ selector, new in jQuery 1.4, which seems like it would be faster than selecting then filtering through parents. http://api.jquery.com/closest/

    Also, .find(‘:checkbox’) is equivalent to .find(‘*:checkbox’), which is likely less efficient than limiting it to .find(‘input:checkbox’).

    Nice solution, thanks for sharing.

    #17
18. 

    mojito said— 6 months later

    Thanks for this writeup!
    Will this work if two fieldsets are defined on the same page ? I have some divs which I show and hide based on a user selection. So I’d like to do something as follows:

    // these will be affected by check all
    Check all
    Checkbox
    Checkbox
    Checkbox

    Check all
    Checkbox
    Checkbox
    Checkbox

    I tried this but the Select all toggle effect appears only on the first fieldset tags.

    #18
19. 

    downtroden said— 7 months later

    having the same problem as mojito

    #19
20. 

    Brian Cray said— 7 months later

    @mojito + @downtrodden – try the new code.

    #20
21. 

    downtroden said— 7 months later

    duh… found the solution to the problem that mojito and I shared, instead of searching for an id (unique to the page) change to it to searching for a class. Voila.

    Thanks for this though, REALLY nice little piece of jquery.

    #21
22. 

    Zdenka said— 8 months later

    Great, exactly what I needed, thanks!!

    #22
23. 

    Trevor Saint said— 11 months later

    Very nice. Thanks for the information.

    FYI

    I find a regular occurrence when browsing many sites that people don’t seem to care for those without JS. Meaning this check all functionality is cool, and adds extra for those that have JS.

    But ideally the approach that I would take is to output the check all checkbox using JS as well. This way functionality is not added that won’t work if the user has turned off JS.

    Simply put. The check all checkbox won’t be shown if JS is turned off. .

    Just an idea.

    #23
24. 

    Ayel said— on August 6, 2009 later

    try my code:

    $(function () {
    $(“#checkall”).click(function () {
    $(“input:checkbox.checkall”).attr(“checked”, this.checked);
    });
    });

    #24
25. 

    Respond to this post—

    Your name

    E-mail address will not be published