Multi-Item Selection

Ever thought that clicking on multiple checkboxes is not a very user-friendly task? Imagine rows and rows of junk mail that you'd like to select in your email app. This little script tries to ease that task by allowing a rapid and simple selection of multiple items by clicking, holding and moving over the desired items.


View demo Download source

Today we’d like to share a little script with you that allows a click & hover selection of checkboxes or any other element. Mainly the idea comes from the common task that we do every day in our email app or elsewhere: checking checkboxes, one after the other by clicking on them. Sometimes you’d like to select more items more quickly so we thought it might be an interesting approach to click, hold and then simply move over all the items that should be selected. It’s quicker and easier to select multiple items like that.

Please note that this is for desktop only.

We’ve made two demos: in the first one we only want the checkboxes to be selectable, and in the second one we want it to be possible to hover over the whole item in order to select it.

Check out the videos to understand the interaction better:

This video shows the interaction with the checkboxes only. See demo 1.

It’s a bit difficult to see when there’s a click and when it’s just holding the click so this is what happens: when clicking on a checkbox, we’ll need to hold the click in order to activate the selection and the move-and-select behavior. So you’ll need to wait for a customizable period of time (in the demo it’s 300ms) and then when the checkbox is selected, you can move and select the other items.

This video shows the interaction with the entire list item. See demo 2.

This is how you initialize the script:

new magicSelection( [selector], {
	// time to start the selection
	onSelectionTime : 300,
	// element "el" is selected
	onSelection : function( el ) {},
	// element "el" is clicked
	onClick : function( el ) {}
	// selection starts (mouse down for [onSelectionTime]ms)
	onSelectionStart : function( ev ) { return false; },
	// selection ends (mouse up)
	onSelectionEnd : function( ev ) { return false; },
} );

Hope you find this useful and feedback is welcome!

View demo Download source


Tagged with:

Related Articles

Receive our bi-weekly Collective or blog updates right in your inbox.

Which newsletter would you like to receive?

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.