Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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.

share|improve this question
add comment

5 Answers

up vote 8 down vote accepted

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

share|improve this answer
2  
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 '10 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 '10 at 7:41
2  
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 '11 at 17:41
1  
How about a tooltip when hovering over that checkbox reading "check/uncheck all"? –  Mark Gavagan Feb 13 '13 at 15:07
add comment

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)?

share|improve this answer
    
Finally one who understand it right. –  Mike L. Sep 15 '11 at 14:48
add comment

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.

share|improve this answer
5  
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 '10 at 14:33
add comment

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

share|improve this answer
add comment

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.

share|improve this answer
    
Strange that Gmail's grayed-out button is clickable and functions like a normal, not-grayed-out button. –  Ken Mohnkern Apr 20 '11 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 Apr 26 '11 at 4:31
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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