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

6 Comment(s) | Posted December 02, 2008 by Joel Sutherland | 

• 
• 
• 
• 
• 
• 

Joel Sutherland

Joel Sutherland leads operations at NMC where he has launched over 250 sites and served as lead developer on the company's CMS which serves millions of unique visits each year. Joel has an Honors Degree in Computer Science from UNC Chapel Hill where he was a Morehead Scholar. Follow Joel on Twitter.

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.

Categorized in: Development, jQuery