How to produce a Gmail-style checkbox selection interface?

May 20, 2006 2:07 AM

Does anyone know how it's possible to produce an interface for checkbox selection like the one in Gmail? Namely, where you can hold down shift and click the first and last items in a list, and it'll automatically select all the ones in between. Is it possible with simple JavaScript without having to use AJAX or other fancy-pants technology...
posted by tommorris to Computers & Internet (8 answers total)

This has nothing to do with AJAX. It is simple javascript. Two event listeners: one monitors for the shift key, the other is an onclick (or onrelease) handler attached to each checkbox. The system also keeps track of the last clicked position to determine which direction it should check (or uncheck) rows. If any rows are already checked that in the "path" of the checking direction, they maintain their status.

The two most important things to look at when determining whether a shift-selection will be "check" or "uncheck" are the direction (based on the last selection) and the checked/unchecked status of the element you're clicking on. If you have a group selected, then click on an unchecked box at the other end of your selection, they will all be checked (since the checked status of the last box is false). If the checked status of the last item were instead true, it would unselect the items.

There's actually a bug in their selection model, if you play around with it: it appears that the last checked box becomes the new "root" checking node, but they aren't checking for the status of the checkbox before the shift-selection process.

To illustrate: click about ten boxes in a row in the middle of the page. #1 is the top box, #10 is the bottom box. Then, starting at box #7, unclick some boxes in the middle working your way up (say, #6, #5, #4). Then hold down shift and click the box directly above your selection (the equivalent of box #0). Box #4 will also get checked, because that was the last box you selected (and thus, is the current root selection).
posted by Civil_Disobedient at 3:02 AM on May 20, 2006

And while I'm sure you just want some easy event listener code and don't care for a treatise on checkboxes, you need to understand that the basics of this are pretty simple. It's ironing out all the permutations of user behavior that will separate something like GMail from the 20-line hack-jobs that are rife with bugginess and never quite work right.

Anyway. Here is a nice key handler routine.
posted by Civil_Disobedient at 3:09 AM on May 20, 2006

Best answer: Heh, I didn't really go as into depth into the logistics of the checkbox selecting/deselecting, but just wrote up a simple example to show that it was possible (and pretty simple JavaScript): here. The source is pretty self-explanatory. No "AJAX" necessary (barf).
posted by zixyer at 3:21 AM on May 20, 2006

Consider the value of such a thing though. You now have to make it clear to the user the option exists, as opposed to more common conventions like putting a checkbox image in the header row of a table (since it's hard to come up with a label for that column anyway) that allows users to select and unselect all. I mention this because I am a web developer and a Gmail user and had no idea what you're describing was an option.
posted by yerfatma at 6:03 AM on May 20, 2006

zixyer, that's a nice, quick example. Unfortunately it suffers exactly from what I was talking about. I know it sounds like semantics, particularly since your example is just a quick mockup. But it's these little details will drive a user crazy. For example: click all the boxes. Now, using your shift-select, deselect all the boxes.

You can't do it.
posted by Civil_Disobedient at 7:52 AM on May 20, 2006

I didn't implement deselecting. Shift-clicking only selects boxes.
posted by zixyer at 8:39 AM on May 20, 2006

I don't know if you specificially wanted it in Javascript, but there is a Greasemonkey script that allows you do to so. Very basic and easy to implement.
posted by apple scruff at 11:04 AM on May 20, 2006

I don't know why zixyer didn't get a Best Answer after the work he or she put in.

Especially as the question just asks if it's possible. Yes, it's possible.

Just to clear up any possible remaining confusion about "AJAX" (a technology that, like "DHTML" before it, doesn't really exist): it's only AJAX if the JavaScript gets information from a server as part of the script, using XMLHTTPRequest. JavaScript changing something about a local page is just ... JavaScript.
posted by AmbroseChapel at 2:57 PM on May 20, 2006