html
1 <html>
2 <head>
3 <meta http-equiv="content-type" content="text/html;charset=utf-8">
4 <script src="jquery.min.js"></script>
5 <script src="shiftCheck.js"></script>
6 </head>
7 <body>
8 <table id="table">
9 <tr><td><input type="checkbox" ></td><td>hehe</td></tr>
10 <tr><td><input type="checkbox" ></td><td>hehe</td></tr>
11 <tr><td><input type="checkbox" ></td><td>hehe</td></tr>
12 <tr><td><input type="checkbox" ></td><td>hehe</td></tr>
13 <tr><td><input type="checkbox" ></td><td>hehe</td></tr>
14 <tr><td><input type="checkbox" ></td><td>hehe</td></tr>
15 </table>
16 </body>
17 </html>
js
1 function enableShiftCheck(checkboxs) { 2 let startChecked; 3 function handleCheck(e) { 4 if(e.shiftKey){ 5 let thisIndex = checkboxs.index(this); 6 let startIndex = checkboxs.index(startChecked); 7 let startNum = thisIndex < startIndex ? thisIndex : startIndex; 8 let endNum = thisIndex > startIndex ? thisIndex : startIndex; 9 for(let i = startNum; i <= endNum; i++) { 10 if(this.checked) { 11 checkboxs.eq(i).prop("checked", true); 12 } else { 13 checkboxs.eq(i).prop("checked", false); 14 } 15 } 16 } 17 startChecked = this; 18 } 19 checkboxs.click(handleCheck); 20 } 21
22 $(function(){ 23 enableShiftCheck($("#table :checkbox")); 24 });