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 });