Javascript: Selecting a range of checkboxes

A quick post about a small snippet of code that I’ve quickly written up, just to see how easily it could be done. It’s a feature that I feel should be on every web app (there are exceptions though). It’s the ability, when dealing with a list of checkboxes (in an email client for example), to be able to select one checkbox and then, while holding shift, select another and for this to then select all those checkboxes in between. To effectively select a range of checkboxes all at once.

This reduces the number of clicks required, in some cases, drastically and is one of those nice little touches which really makes you feel as though the user interaction with a web app has been considered. To make things even better, it’s a very simple feature to implement! I’ve attempted to do it sparingly, but I’m sure it can be condensed even more. And my comments can of course be removed to save space.

Hopefully this will help someone  to add a nice little extra to their web app, just as a final bit of polish. I’ve put it on to Codepen, which means if I’ve made a massive error, someone can fork me and correct it!

You can find my code at http://codepen.io/andrewbridge/pen/qtgcE and it includes a demo of the code working, do try it out! It may be something that’s helpful to you!

Advertisements

Published by

Andrew Bridge

A student web developer with a keen interest in bringing function and form together as one to create a powerful, beautiful experience for users.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s