Blog

Where we discuss our work, thoughts, and process

App with a list of checkboxes? Skip repeated clicks with jQuery QuickCheck.

Applications have moved to the browser and with that come lists of checkboxes.  It can be frustrating to click a list of checkboxes, so many applications like Gmail provide utilities to select items that meet certain criteria.  Solutions exist as browser plugins (ie. CheckBoxMate, Check All ), but these have not become mainstream.

As developers, we can mimick the behavior of these browser plugins with jQuery. QuickCheck is a proof-of-concept jQuery plugin that makes it easier to manipulate lists of checkboxes. Try a demo here. QuickCheck adds the following behavior to checkboxes:

  1. When you mouse-down on a checkbox, keep the mouse pressed and drag the cursor over other checkboxes.
  2. The other checkboxes with either become checked or unchecked depending on the state of the first checkbox.

QuickCheck makes it much easier to manipulate lists of html checkboxes. All you need to know to configure the plugin (besides how jQuery plugins work) is the following:

$('.multi').quickcheck(); // Applies QuickCheck to checkboxes with class 'multi'
$(':checkbox').quickcheck(); // Applies QuickCheck to all checkboxes

The plugin also has a couple of settings that let you change its behavior:

mode
default: If the initial checkbox is unchecked, it will check that box and check all boxes that the mouse is dragged over. If the initial checkbox is checked, it will uncheck all boxes.
"check": Regardless of the initial checkbox, the mouse will only check boxes it is dragged over.
"uncheck": The mouse will only uncheck boxes it is dragged over.
"toggle": The mouse will toggle all checkboxes it is dragged over.

mouseup
Once the mouse is released, the plugin needs to know that it should stop selecting checkboxes when the mouse is over them. Set this to the selector you want this mouseup event to be attached to. The default is "html" which likely never needs to change.

To use the settings do the following when applying the plugin:

$('.multi').quickcheck({mode: "check", mouseup: "html"});

Drawbacks and Potential Improvements

This technique has some obvious benefits but it also has some drawbacks. Here are some quick thoughts on them. Please add your own throughts in the comments.

Drawbacks

  • The functionality is not immediately obvious to those used to typical checkbox behavior.
  • Unlike the browser plugin, there is not a visual box to show what region you have selected.
  • The mouse must move directly over the box for it to be activated. This makes it tough to select boxes that are not aligned.

Potential Improvements

  • Keyboard Shortcuts: Hold a key while dragging to switch between modes to quickly select/deselect.
  • "Undo": If you drag over a checkbox a second time in the same run, return it to its original state.

Thanks for looking over the plugin. Download a zip of the demo and plugin here. Be sure to leave a comment with your thoughts.

Comments

 Andrei Eftimie's avatar
Andrei Eftimie

Interesting ideea. Already seeing some possible implementations.\r\n\r\nTo bad checkboxes are hard to make bigger. I lost the vertical line twice in the demo, due to not moving my mouse completely vertical.

 Bill Beckelman's avatar
Bill Beckelman

I haven't looked at the actual plugin code yet, but certainly plan to. \r\n\r\nSince this is being used in a table, why not include the column of cells being dragged over instead of the just the checkboxes. Then just look in the cell for a checkbox to change?

 p3k's avatar
p3k

I think that's a very good idea! I suggest one improvement: using a label for the text besides each checkbox. This would provide a way to also toggle the checkmarks by dragging over the text, thus, increasing the size of the target.

 Joel's avatar
Joel

Bill -- These are not actually in a table. The code works by appending events to the checkboxes themselves. This allows it to work no matter what the markup is.

 jozsef's avatar
jozsef

Excellent idea.Now we can have the photoshoplike checkbox checking.The code is verry simple also.Great work.

 Joel's avatar
Joel

Thanks jozef. Let me know if you come up with any improvements!

Kumar's avatar
Kumar

Fantastic plugin. Looking forward for the keyboard shortcuts as I am already using this now ! Extended a bit further to handle events for the scope of my project.

Leave a comment

Real Time Web Analytics