21

I'm just wondering as to your thoughts on the best way of providing check/uncheck all functionality for an HTML table with multiple rows, that has a column of checkboxes.

Some possibilities:

Extra checkbox in table heading, similar to Gmail. e.g. [ ] Is enabled?

Check all link in table heading. e.g. Is enabled? (check all)

Check all link in table footer directly underneath the checkboxes.

Improve this question
1

5 Answers 5

Reset to default
13

I find this approach pretty self-explanatory (no need for "Select all"):

screenshot
(From: http://www.ibm.com/developerworks/web/library/wa-jquery1/)

However, the keyword here is "I find"! @ChrisF has some good points in his answer, but I guess that you will have to compare the different approaches with real users in order to find out which solution is the best fit.

A few pointers on the shown approach, though:

  • Make the response immediate. i.e., all boxes should be un/checked instantly on the client (no round-trip or delayed form submit) in order to meet the user's expectations.
  • Let the "Select all" UI widget be the same as the ones for each item. It's still a check box -- this just affects the entire column (and is thus placed in the column heading).

EDIT

Improve this answer
4
  • 3
    I don't find that this works for everyone without visible text using a label. There are always new users and there are those who need assistive technologies or have cognitive issues. It has to be more than "obvious", it has to e clear to the uninitiated. I like this approach, but think it fails without text.
    – Susan R
    Sep 10, 2010 at 13:34
  • @Susan R Good point. Perhaps you could get away with "[ ] All" in the header (i.e., adding the text "All") and then wrap it in a <label title="Select all rows below">[ ] All</label>. Just a thought.
    – jensgram
    Sep 11, 2010 at 7:41
  • 3
    The problem with this is what does that represent? What happens when you uncheck the header checkbox? Does it uncheck all? What happens when you uncheck one of the items below? Does it uncheck the header checkbox? What happens when you check all items individually? Does it check the header checkbox? The checkbox does not convey the meaning properly for it to be a good solution.
    – Charles Boyung
    Apr 6, 2011 at 17:41
  • 1
    How about a tooltip when hovering over that checkbox reading "check/uncheck all"?
    – Mark Gavagan
    Feb 13, 2013 at 15:07
13

Check all and uncheck all are actions. As such, they should be represented the way actions are represented: as buttons.

I posted this as a comment in another answer, but I want to include it here to explain why using a checkbox is a bad idea:

The problem with using a "check all" checkbox is what does that represent? What happens when you uncheck the header checkbox? Does it uncheck all? What happens when you uncheck one of the items below? Does it uncheck the header checkbox? What happens when you check all items individually? Does it check the header checkbox? The checkbox does not convey the meaning properly for it to be a good solution.

Buttons (or links) that state what they do leave absolutely no room for confusion. There's nothing to think about, and isn't the point of our jobs to make it so the basic functions of a system can be done without thinking (so brain-power can be used for the actual function being performed)?

Improve this answer
5
  • 1
    Finally one who understand it right.
    – Mike L.
    Sep 15, 2011 at 14:48
  • 1
    Absolutes are dangerous. There is no substitute for usability testing. Labeling the button check all could be just as effective, or even more so. We've seen in testing that sometimes, without the checkbox some users may not realize what check all means. Testing is always best. Tool tips/callouts, or tours can be effective as well.
    – srgtick
    Oct 15, 2014 at 18:41
  • 1
    @Charles Boyung any research to back that up?
    – Tin Man
    Feb 22, 2018 at 9:09
  • 1
    Checkboxes often have a third state that can be used to indicate some options are checked and some are not and yes if all are checked the checkboxed gets checked and if none are checked the checkbox gets unchecked otherwise it is in the 3rd state
    – yitzih
    Apr 23, 2018 at 19:08
  • 1
    @yitzih That's still ambiguous to what that represents and what happens when you click it. It is far more clear to just use the elements for their intended function.
    – Charles Boyung
    May 3, 2018 at 16:54
6

Having the extra checkbox in the header (or footer) is a more direct approach. The option is closely linked with the column it refers to, which is especially useful if you have more than one checkbox column.

The downside of this is that the action might not be immediately obvious to all users.

A "Select/Deselect all" link is more explicit and you can include some more explanatory text (if necessary), but it does make your page longer.

Improve this answer
1
  • 8
    We have a web application that's used by quite a lot of computer illiterate people and we found that quite a lot of people didn't realise that a checkbox in the column header was a select/deselect - they simply thought it indicated the column had a tick box. So, as @ChrisF says, you may find the textual link much more user friendly - we did!
    – Sk93
    Sep 10, 2010 at 14:33
6

I used to like the simple checkbox at the top, whats good about it is experience, almost everyone knows what it does, and if they dont it takes one click for them to find out... but, i've seen linkedin do something neat:

enter image description here

Improve this answer
1

Interesting approach done by Google in GMail, the "Check/Uncheck All" is also a drop-down menu with additional options. And has a "Checked Some" state when it is grayed out.

Improve this answer
2
  • Strange that Gmail's grayed-out button is clickable and functions like a normal, not-grayed-out button.
    – Ken Mohnkern
    Apr 20, 2011 at 18:39
  • It only looks like a button, it is actually a div. But from a usability point of view, it is a small enough sin that it wont really confuse people.
    – Evgeny Zislis
    Apr 26, 2011 at 4:31

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.