jquery-multi-select-checkbox

jQuery Plugin Allows Multiple Selections of Checkbox Inputs

by

Multi select-checkbox is a jQuery plugin that enables multiple selections of checkbox Inputs as well as other DOM elements. This jQuery plugin for multiple checkboxes enables the user to select all relevant checkboxes with a single click and/or select multiple checkboxes using the CTRL and Shift keys.

shift click to select multiple checkboxes javascript, how to select multiple checkboxes in javascript, how to select more than one checkbox in html, shift click select multiple items javascript

How to make use of it:

1. Create a bunch of checkboxes on the net 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 multi-select-checkbox plugin after loading the most recent 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 choice events to your components, e.g. table rows:

$(".select-all-checkbox").multiselectCheckbox({
  checkboxes: ".select-checkbox",
  sync: ".table .row"
});

5. The you may customize the chosen rows within the CSS.

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

6. Callback features.

$(".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 choices.

$(".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"
});

Select Multiple Checkboxes With Ctrl and Shift Keys, how to select one checkbox from multiple checkboxes in jquery, label for multiple checkboxes

jquery-multiselect-checkbox

See Demo And Download

Demo
Download

Official Website(tonix-tuft): Click Here

This superior jQuery/javascript plugin is developed by tonix-tuft. For extra Advanced Usages, please go to the official website.

Leave a Comment