This time I will share jQuery Plugin and tutorial about Select Multiple Checkboxes With Ctrl and Shift Keys, hope it will help you in programming stack.
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.
How to use it:
1. Create a group of checkboxes on the web page.
1 |
<input type="checkbox" class="select-checkbox" value="1" /> |
2 |
<input type="checkbox" class="select-checkbox" value="2" /> |
3 |
<input type="checkbox" class="select-checkbox" value="3" /> |
4 |
<input type="checkbox" class="select-checkbox" value="4" /> |
5 |
<input type="checkbox" class="select-checkbox" value="5" /> |
2. Create a ‘Parent’ checkbox to check/uncheck all these checkboxes.
1 |
<input type="checkbox" class="select-all-checkbox" value="1" /> |
3. Load the multiselect-checkbox plugin after loading the latest jQuery library.
1 |
<script src="/path/to/cdn/jquery.min.js"></script> |
3 |
<script src="/path/to/dist/jquery-multiselect-checkbox.js"></script> |
4. Synchronize the selection events to your elements, e.g. table rows:
1 |
$(".select-all-checkbox").multiselectCheckbox({ |
2 |
checkboxes: ".select-checkbox", |
5. The you can customize the selected rows in the CSS.
1 |
tr.jquery-multi-select-checkbox-checked { |
6. Callback functions.
01 |
$(".select-all-checkbox").multiselectCheckbox({ |
02 |
checkboxes: ".select-checkbox", |
04 |
onNotAllChecked: function(selectedMap) { |
05 |
console.log("Not all checked", selectedMap.orderedByI()); |
07 |
onAllChecked: function(selectedMap) { |
08 |
console.log("All checked", selectedMap.orderedByI()); |
10 |
onAllUnchecked: function(selectedMap) { |
11 |
console.log("All unchecked", selectedMap.orderedByI()); |
7. All default options.
01 |
$(".select-all-checkbox").multiselectCheckbox({ |
04 |
onAllChecked: () => {}, |
05 |
onAllUnchecked: () => {}, |
06 |
onNotAllChecked: () => {}, |
07 |
eventsElement: document, |
09 |
handleShiftForCheckbox: false, |
10 |
usePrevUntilNextUntilForSync: true, |
11 |
checkedClassName: "jquery-multi-select-checkbox-checked", |
12 |
checkedKeyDataAttributeName: "jquery-multi-select-checkbox-checked-key" |
This awesome jQuery plugin is developed by tonix-tuft. For more Advanced Usages, please check the demo page or visit the official website.
