This time I will share jQuery Plugin and tutorial about Multiple Selection For Checkboxes – shiftMultiSelect.js, hope it will help you in programming stack.
shiftMultiSelect.js is a tiny jQuery plugin that allows the user to select/deselect multiple rows in an HTML table by holding the Shift key and clicking associated checkboxes.
Additionally, it provides a Check All functionality that enables the user to select/deselect all rows in your HTML table with a single click.
How to use it:
1. Add a group of checkboxes to table rows as follows. Note that each checkbox must have a unique ID.
04 |
<th scope="col">#</th> |
05 |
<th scope="col">First</th> |
06 |
<th scope="col">Last</th> |
07 |
<th scope="col">Handle</th> |
12 |
<th scope="row"><input type="checkbox" id="id_chk1" class="checkRow" value="1" /></th> |
18 |
<th scope="row"><input type="checkbox" id="id_chk2" class="checkRow" value="2" /></th> |
24 |
<th scope="row"><input type="checkbox" id="id_chk3" class="checkRow" value="3" /></th> |
2. Create a ‘Master’ checkbox input to check/uncheck all table rows.
3 |
<th scope="col"><input type="checkbox" name='checkboxMaster' /></th> |
4 |
<th scope="col">First</th> |
5 |
<th scope="col">Last</th> |
6 |
<th scope="col">Handle</th> |
3. Load the main script shiftMultiSelect.js after jQuery.
1 |
<script src="/path/to/cdn/jquery.slim.min.js"></script> |
2 |
<script src="/path/to/shiftMultiSelect.js"></script> |
4. Get the checked values.
1 |
$(':checkbox').change(function() { |
2 |
console.log(checkValArray) |
4 |
=> ["1", "2", "3", "4", "5"] |
5. Use CSS to highlight tables rows that are checked.
1 |
.table-primary, .table-primary>th, .table-primary>td { |
2 |
background-color: #7F8C8D; |
This awesome jQuery plugin is developed by ryandougc. For more Advanced Usages, please check the demo page or visit the official website.
