Select Multiple Checkboxes With Ctrl and Shift Keys

File Size: 241 KB
Views Total: 4645
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Select Multiple Checkboxes With Ctrl and Shift Keys

A small jQuery plugin for multi-select checkboxes that enables the user to check all related checkboxes with one click and/or select multiple checkboxes with CTRL and Shift keys.

Useful in cases where you want to select multiple rows/items in an HTML table/list.

See Also:

How to use it:

1. Create a group of checkboxes on the web page.

<input type="checkbox" class="select-checkbox" value="1" />
<input type="checkbox" class="select-checkbox" value="2" />
<input type="checkbox" class="select-checkbox" value="3" />
<input type="checkbox" class="select-checkbox" value="4" />
<input type="checkbox" class="select-checkbox" value="5" />

2. Create a 'Parent' checkbox to check/uncheck all these checkboxes.

<input type="checkbox" class="select-all-checkbox" value="1" />

3. Load the multiselect-checkbox plugin after loading the latest jQuery library.

<script src="/path/to/cdn/jquery.min.js"></script>
<!-- From Local -->
<script src="/path/to/dist/jquery-multiselect-checkbox.js"></script>
<!-- Or From A CDN -->
<script src="[email protected]/dist/jquery-multiselect-checkbox.min.js"></script>

4. Synchronize the selection events to your elements, e.g. table rows:

  checkboxes: ".select-checkbox",
  sync: ".table .row"

5. The you can customize the selected rows in the CSS.

tr.jquery-multi-select-checkbox-checked {
  background: #ebf9ff;

6. Callback functions.

  checkboxes: ".select-checkbox",
  sync: ".table .row",
  onNotAllChecked: function(selectedMap) {
    console.log("Not all checked", selectedMap.orderedByI());
  onAllChecked: function(selectedMap) {
    console.log("All checked", selectedMap.orderedByI());
  onAllUnchecked: function(selectedMap) {
    console.log("All unchecked", selectedMap.orderedByI());

7. All default options.

  checkboxes: null,
  sync: null,
  onAllChecked: () => {},
  onAllUnchecked: () => {},
  onNotAllChecked: () => {},
  eventsElement: document,
  syncEvent: "click",
  handleShiftForCheckbox: false,
  usePrevUntilNextUntilForSync: true,
  checkedClassName: "jquery-multi-select-checkbox-checked",
  checkedKeyDataAttributeName: "jquery-multi-select-checkbox-checked-key"



  • v3.13.0

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