Jquery实现checkbox按shift多选

工程师怡博技术 2022年11月19日

0 收藏 934 点赞 4,808 浏览 1037 个字

html

 <html>
 <head>
   <meta http-equiv="content-type" content="text/html;charset=utf-8">
   <script src="jquery.min.js"></script>
   <script src="shiftCheck.js"></script>
 </head>
 <body>
   <table id="table">
     <tr><td><input type="checkbox" ></td><td>hehe</td></tr>
     <tr><td><input type="checkbox" ></td><td>hehe</td></tr>
     <tr><td><input type="checkbox" ></td><td>hehe</td></tr>
     <tr><td><input type="checkbox" ></td><td>hehe</td></tr>
     <tr><td><input type="checkbox" ></td><td>hehe</td></tr>
     <tr><td><input type="checkbox" ></td><td>hehe</td></tr>
   </table>
 </body>
 </html>

 function enableShiftCheck(checkboxs) {
   let startChecked;
   function handleCheck(e) {
       if(e.shiftKey){
           let thisIndex = checkboxs.index(this);
           let startIndex = checkboxs.index(startChecked);
           let startNum = thisIndex < startIndex ? thisIndex : startIndex;
           let endNum = thisIndex > startIndex ? thisIndex : startIndex;
           for(let i = startNum; i <= endNum; i++) {
             if(this.checked) {
                 checkboxs.eq(i).prop("checked", true);
             } else {
                 checkboxs.eq(i).prop("checked", false);
             }
           }
       }
       startChecked = this;
   }
   checkboxs.click(handleCheck);
 } $(function(){
     enableShiftCheck($("#table :checkbox"));
 });