zoukankan      html  css  js  c++  java
  • Jquery实现checkbox按shift多选

    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 });
  • 相关阅读:
    input 特殊字符限制
    angular $http服务
    angular $resouse服务
    ng-model-options 时延
    Pytorch之数据处理
    python 小顶堆
    刷题套路总结
    数组分成和尽可能相等的子数组
    python3.7 sorted 自定义排序
    Leetcode 二维数组周游 54
  • 原文地址:https://www.cnblogs.com/guanghe/p/10789320.html
Copyright © 2011-2022 走看看