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:

• Shift + Click To Select Multiple Checkboxes
• Touch-enabled Checkbox Multiple Selection Plugin - jQuery Checkboxrange

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="https://cdn.jsdelivr.net/npm/jquery-multiselect-checkbox@latest/dist/jquery-multiselect-checkbox.min.js"></script>

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

$(".select-all-checkbox").multiselectCheckbox({
  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.

$(".select-all-checkbox").multiselectCheckbox({
  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.

$(".select-all-checkbox").multiselectCheckbox({
  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"
});

Changelog:

2021-09-22

• 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.