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.

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!

Tagged with:

Manoela Ilic

Manoela is the main tinkerer at Codrops. With a background in coding and passion for all things design, she creates web experiments and keeps frontend professionals informed about the latest trends.

Stay in the loop: Get your dose of frontend twice a week

๐Ÿ‘พ Hey! Looking for the latest in frontend? Twice a week, we'll deliver the freshest frontend news, website inspo, cool code demos, videos and UI animations right to your inbox.

Zero fluff, all quality, to make your Mondays and Thursdays more creative!

Feedback 11

Comments are closed.
  1. What’s the different between “checkbox only” and “entire item”? I can select in same way with two of them.

    • In the checkbox only demo the selection only happens when you click and move over the checkboxes. In the other demo you can click and move over any part of the items and that will also select them. Hope that clarifies it. Cheers.

  2. Great! I’ve actually been building this myself too. Really love the simplicity behind the code and the mouseover is something i hadn’t considered.

  3. Can this be adapted to work with tables?

    I have been tinkering with the code, but I’m not a jQuery expert and haven’t found a solution yet.

    I love what the code can do, but need it to work on tables.

    Thanks, Rick

  4. Thanks! this is really an awesome script. It works perfect on almost all browsers except iPad safari.
    This is not working on iPad, when you click, the class ‘selected’ is not getting applied to the . Could you please suggest a fix for this. It would have been a perfect choice if it has the iPad compatibility. Waiting for the workaround!

    Thanks again,