From our sponsor: Chromatic - Visual testing for Storybook, Playwright & Cypress. Catch UI bugs before your users do.
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.
Tiny break: 📬 Want to stay up to date with frontend and trends in web design? Subscribe and get our Collective newsletter twice a tweek.
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!
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.
Yeah that’s working after you explained. Thanks bro.
Cool! I have made something similar a month ago. “It’s on CodePen as Multiple items selection”.
Awesome! 😀
For Drupal addicts… there is an admin backend module with a similar functionality 😉
https://drupal.org/project/speedboxes
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.
Yeah, it working after I read this post, Good job.
GOOD Job ….
How get List of checked ?
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
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,