Shift.js

Use the shift key to select a range of elements, such as checkboxes and radio buttons.

 

Mimics Gmail's checkbox filter where you hold down the shift key to select ranges.

Install with npm: npm install shift-js.
…We're on Bower as well: bower install shift-js.

Getting Started

Shift requires the adding of an attribute to each checkbox to specify its group. With this you can specify unique groups for your collection of checkboxes – allowing you to have multiple checkbox collections per page.

<input type="checkbox" data-shift-group="groupOne" />
<input type="checkbox" data-shift-group="groupOne" />
<input type="checkbox" data-shift-group="groupOne" />

<input type="checkbox" data-shift-group="groupTwo" />
<input type="checkbox" data-shift-group="groupTwo" />
<input type="checkbox" data-shift-group="groupTwo" />

Setting up two unique groups (groupOne and groupTwo) allows both to act independently of one another. If you intersperse the checkboxes then it tends to make more sense – because checkboxes of another group will be let well alone.

Once you've setup your DOM there is nothing else to do – Shift will setup the behaviour automatically!