Contact-enabled Checkbox A number of Choice Plugin – jQuery Checkboxrange

Checkboxrange is a tiny jQuery plugin that allows you to choose a number of checkboxes through mouse drag & contact gestures or by holding the Shift key.

See Additionally:

Learn how to use it:

1. Obtain the plugin and cargo the required sources within the doc.

<hyperlink 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 gaggle of checkboxes to the web page.

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

3. Name the perform on the highest container and the plugin will do the remainder.

$(doc).prepared(perform () {
  $('.year-select').checkboxrange();
});

4. Decide methods to organize the checkboxes: ‘horizontal’, ‘vertical’, or ‘any’.

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

5. Decide whether or not to disable the customized checkbox types. Default: false.

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

6. Decide whether or not to indicate the label of the touched checkbox above the finger. Default: true.

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

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

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

8. Decide whether or not to fireside the change occasion when the verify state adjustments. Default: false.

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

9. Carry out a perform on onSelectEnd.

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

This superior jQuery plugin is developed by ntrfrnc. For extra Superior Usages, please verify the demo web page or go to the official web site.