Toggler v0.1

I decided to put together a little proof of concept. The idea is to mimic the functionality found in desktop applications like Adobe Photoshop where a user can click on a checkbox and while continuing to hold the mouse down, can move over other checkboxes and have them toggle as well.

I've put together a demo page for Toggler that you can check out and play around with. Because this is a proof of concept, I haven't tested this in Safari or Opera and I'm using down and dirty event handling.

I could honestly see this as being a replacement for or as an addition to "toggle all" buttons.

Download Toggler v0.1

Published June 03, 2007
Categorized as JavaScript
Short URL: http://snook.ca/s/811

Conversation

34 Comments · RSS feed
Taylor said on June 03, 2007

Very nice.
Works great in Firefox... of course; but Safari struggles: no boxes will check.
Seems very useful.

Jina Bolton said on June 03, 2007

I think it's an excellent idea.

However, I think it would be good to offer *alongside* toggle all... not as a replacement. I say this because I actually have pain in my arm, and dragging-like movements can be painful for me. I actually enjoy the toggle all features on sites for this very reason.

It's great to offer, though, for those that do prefer dragging, and would be a good way to add another usability method.. which is always good. Just don't leave us with tendonitis/arthritis out. ;)

Jonathan Snook said on June 03, 2007

@Taylor: it looks like WebKit works. I'd have to track down what Safari is getting confused with.

@Jina: very true. I think that's a very valid point.

Hsiu-Fan Wang said on June 03, 2007

I'm just curious why you didn't go for the click a checkbox, and click another while holding shift selects a range? (Sorta-kinda seen in bloglines, and gmail.)

It has analogues in Windows UI I believe... and does the same thing.

PS: I never knew Photoshop had this. So. Cool.

adrian said on June 03, 2007

I'm not sure about the usefulness of this, due to people either not expecting that functionality or not needing it. I'm struggling to see the situation where this would be the killer app so to speak

excellent experiment though. kudos.

Chris Gross said on June 03, 2007

I have to disagree with adrian on the whole usefullness aspect. I think this would be extreemely useful. From the perspective that, if enough people used it, it would become the standard, so the point of saying that people wont expect the functionality is not really a big deal, if it were to become adopted by major websites.

Jonathan Snook said on June 03, 2007

Re: Safari bug. I somewhat have it resolved. There's one scenario where it doesn't work perfectly and with a quick Safari check, I should be able to solve. But at least Safari users will get a sense of what it should do.

@Hsiu-Fan: How about that... I didn't know Gmail had shift-click support. :) This, of course, ties into adrian's point about discoverability. That's always the problem with anything trying to replicate a desktop interaction that doesn't already exist on the web: nobody knows how to discover it. I like this interaction over the shift-click because it's one-handed.

CTAPbIu_MABP said on June 03, 2007

As a matter of fact it will be useful to deselect (uncheck) checkboxes, while moving backward

digitarald said on June 04, 2007

Nice proof-of-concept snook, the feature inspired me ;) : I packed it into a small mootools class, supporting the suggestions for the shift support and reverting while moving backwards:
digitarald.de Playground: Toggler

CTAPbIu_MABP said on June 04, 2007

@digitarald
cant you convert it to jquery-plugin?

Abu said on June 04, 2007

For many people, hitting the actual check box is tough enough - hence the usefulness of labels. For many more people, running a mouse pointer across checkboxes is going to be very difficult and (like me) would prefer clicking each one seperately and getting it right first time roud.

Nevertheless, as a proof of concept, well done!

What would be really good, and i dream of the day when it can be possible on the web, is when you can select like you do on a desktop. That is to say, as soon as you hold down the mouse button and start dragging, a box shows and everything within the box gets selected.

Jonathan Snook said on June 04, 2007

@Abu: I'd disagree slightly that running a mouse pointer over a checkbox is more difficult than clicking each one individually. As long as one can hold the mouse button down, it's quite handy to be able to swing the cursor back and forth until each one is knocked off instead of trying to position the cursor over each checkbox. With that said, this functionality could easily be expanded to include larger hit areas like including the labels as active targets, something I had considered but ultimately decided not to implement.

@digitarald: nice work. :)

Robert said on June 04, 2007

Very nice, although I assume very few people would realize you could actually do that with checkboxes on a website. Not sure where this idea would best be used?

Nate Klaiber said on June 04, 2007

Very nice. I like that it isn't an extension of a library, since it is a small js file to achieve the task. Adding it as an extension would be nice, after the fact, but as a standalone like this it is much nicer.

Works well in FF on the mac....and, as Jina stated - couple this with a 'toggle all' and it is extremely useful.

Nice work...

Scott said on June 04, 2007

Here's a greasemonkey script that adds similar functionality to any site:

http://www.squarefree.com/2005/04/13/checkrange/

Click the first box, then shift-click the last box. It's saved me a lot of time.

Dan said on June 04, 2007

I always thought it was cool you could do that in Photoshop, but never thought anything more of it.

Very nice that you wrote a script to do this on the web, but I don't know about how practical it is - only because you're average user probably wouldn't think to try it, and it seems sort of silly to leave a note to the user letting them know that the functionality is there. Plus I can't remember the last time I saw a list of checkboxes like that.

Pat said on June 04, 2007

That is uber-sweet!

A couple of thoughts;
1. Would it make more sense if it reversed the current state of the checkbox?
2. I don't see that it would be that hard to add "Click/drag to select multiple" to the label area to explain use quickly.
3. I personally think it would be better if the select area included the text next to the box, so the whole label, which I understand you decided not to do, but it would make it an easier target (especially for touchpad users :)

Very cool all around though, and speedy. I didn't experience any lag or problems on my old linux laptop in Firefox.

Angelo said on June 04, 2007

Textpattern has a button (in the article tab, perhaps elsewhere as well) that selects a range of checkboxes. Gmail goes a step in a different direction and provides links that select emails based on read or starred state.

This is a neat proof of concept. However, I find it a stretch to imagine an interface that couldn't be better handled by a custom multi-check solution. The web is not a desktop application; users do not expect it to behave in the same manner.

Andy Kant said on June 04, 2007

Cool proof of concept, but it'd be more useful if it included LABEL's as well as dragging over the LABEL's because dragging a straight line over a bunch of small objects can be difficult.

Jason said on June 04, 2007

Very good idea, and somewhat useful too. Would be nice to add the ability of a SHIFT click, something similar to selecting rows in an excel spreadsheet.

Thijsvdv said on June 04, 2007

To take it a step further: how about making double-click a 'select-all' functionality, and double-clicking again an 'undo' of that first double-click (so you'd have to remember the state of all of the checkboxes...)

You could even use the scroll wheel: click a checkbox, and then use the scrollwheel to automatically select a number of checkboxes below or above that selected one, and the next click you make (anywhere) stops that scrollwheel-function...

Maybe that's a bit too much however :)

eburhan said on June 04, 2007

very good idea but it dont't work with opera :(

Jonathan Snook said on June 04, 2007

Re: Discoverability: This is always an issue with any desktop interaction that you try bringing to the web that doesn't exist there already. The question is whether the interface could be descriptive enough to guide the user towards letting them know what to expect. For example, Google Calendar lets you hit a date and then drag the mouse to another date. Google Mail has shift-click. Both are completely unexpected behaviour on the web and yet people discover them. The key thing here is not to eliminate other possibilities but to augment already existing systems to give users greater control.

@eburhan: What version of Opera are you using? I just tested in v9 and it's working tickety-boo.

Chris Sullins said on June 04, 2007

I've gotten an error every once in a while, when playing with it. I cannot reproduce it consistently. It occurs when untoggling the list one by one. When I click the last one, the first one (that I've already unchecked) toggles on. I got it a few times in a row, but not since, so I can't isolate precisely where it is.

Bramus! said on June 04, 2007

I remember a likewise script back in the days dubbed "Click-n-drag checkboxes".

After Googling a bit and using the wayback machine I found one archived page, dated December 15 2003 (yes, 2003). The javascript can be found right here

Bramus! said on June 04, 2007

Also found this recent solution, dated March 12 2007

James Mitchell said on June 05, 2007

That is very nice. It is a feature that many of us likely use on a near daily basis. Good job!

Ara Pehlivanian said on June 05, 2007

Nice work! This is one of those "it was staring us right in the face and no one noticed" design solutions. Very, very nice.

rasmus said on June 05, 2007

LOL - I totally misread your instructions and shift-clicked the checkboxes (holding shift down throughout).... this triggered a bug in firefox where upon unchecking a checkbox it disappears altogether!?

but when using the page as instructed it works really well and it actually feels quite nice and intuitive ;)

Anders said on June 05, 2007

Nice one, even though I had some trouble using it. Doesn's seem to work in Safari, but in Firefox it is alright. I think it would be a bit more intuitive to have the check boxes invert on hover (hovering a checked box would uncheck it). At least that was the behavior I expected. Don't know if that is the way that checkboxes work in desktop applications. My memory is a bit short term.

On a sidenote: The colour contrast on this site is a bit off in some places. I can hardly tell the blog post # from the background. The same goes for the date and the "All comments" link.

Keep up the good work!

Benjamin Hirsch said on June 06, 2007

I wonder if it works when rolling over the "label" element. That would make it much nicer as it would extend the range of the rollover. Could you try it using < label > tags?

CTAPbIu_MABP said on July 03, 2007

jQuery plugin now available on my blog <!-- javascript xhtml sql css php -->
sorry but comments only in russian

nat said on July 12, 2007

Awesome, been looking for something like this for a while! Thank you for sharing!

starx said on September 24, 2007

I've been searching the internet something lik this. Great script!!

I've been playing with the code to get it to highlight the row the checkbox is in but I can't figure out how to reference the id of the row. Any suggestions?

Sorry, comments are closed for this post. If you have any further questions or comments, feel free to send them to me directly.