Touch-enabled Checkbox Multiple Selection Plugin - jQuery Checkboxrange

File Size: 17.8 KB
Views Total: 202
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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:

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>

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

$(document).ready(function () {

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

  path: 'any',

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

  noStyle: true,

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

  onTouchLabels: true,
  onTouchLabelsLimit: 25,

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

  lineOffsetTop: 15,
  lineOffsetLeft: 15,

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

  fireChangeEvent: true,

9. Perform a function on onSelectEnd.

  onSelectEnd: function () {}

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