Touch-enabled Checkbox Multiple Selection Plugin - jQuery Checkboxrange

Checkboxrange is a tiny jQuery plugin that enables you to select multiple checkboxes via mouse drag & touch gestures or by holding the Shift key.

See Also:

• Select Multiple Checkboxes With Ctrl and Shift Keys
• Shift + Click To Select Multiple Checkboxes

How to use it:

1. Download the plugin and load the necessary resources in the document.

<link href="/path/to/dist/checkboxrange.min.css" rel="stylesheet" />
<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/dist/checkboxrange.js"></script>

2. Add a group of checkboxes to the page.

<div class="year-select">
  <label><input type="checkbox">2018</label>
  <label><input type="checkbox">2019</label>
  <label><input type="checkbox">2020</label>
  <label><input type="checkbox">2021</label>
  <label><input type="checkbox">2022</label>
  ...
</div>

3. Call the function on the top container and the plugin will do the rest.

$(document).ready(function () {
  $('.year-select').checkboxrange();
});

4. Determine how to arrange the checkboxes: 'horizontal', 'vertical', or 'any'.

$('.year-select').checkboxrange({
  path: 'any',
});

5. Determine whether to disable the custom checkbox styles. Default: false.

$('.year-select').checkboxrange({
  noStyle: true,
});

6. Determine whether to show the label of the touched checkbox above the finger. Default: true.

$('.year-select').checkboxrange({
  onTouchLabels: true,
  onTouchLabelsLimit: 25,
});

7. Specify the top & left offsets of the connecting line. Default: 10.

$('.year-select').checkboxrange({
  lineOffsetTop: 15,
  lineOffsetLeft: 15,
});

8. Determine whether to fire the change event when the check state changes. Default: false.

$('.year-select').checkboxrange({
  fireChangeEvent: true,
});

9. Perform a function on onSelectEnd.

$('.year-select').checkboxrange({
  onSelectEnd: function () {}
});

---

This awesome jQuery plugin is developed by ntrfrnc. For more Advanced Usages, please check the demo page or visit the official website.