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>

js

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

 });

Jquery实现checkbox按shift多选的更多相关文章

  1. jquery操作checkbox方法（全选、全不选、至少选择一个、选择值/文本）

    原文:http://blog.csdn.net/u014079773/article/details/52371382 在实际开发中我们经常操作checkbox,不仅仅要获得checkbox选中的值, ...

  2. jquery实现checkbox列表的全选不选

    html代码 <th><input type="checkbox" onclick="selectAll(this);" />全选/取消 ...

  3. 【jQuery】CheckBox使用attr全选无法正确显示

    今天编写JS脚本时,遇到如下的问题. 下面是源代码: <script src="../Scripts/jquery-2.1.3.js"></script> ...

  4. 解决jquery操作checkbox全选全不选无法勾选问题

    最近在学习中使用jquery操作checkbox,使用下面方法进行全选.反选:$("input[name='checkbox']").attr("checked" ...

  5. jquery实现checkbox全选和全部取消，以及获取值

    在后台管理中经常会遇到列表全选和取消的功能,如评论审核.申请等,用到的html标记就是checkbox.我用的是mysql数据库,代码如下: <!DOCTYPE html PUBLIC &quo ...

  6. jquery实现checkbox的全选

    <html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> < ...

  7. jQuery实现Checkbox中项目开发全选全不选的使用

    <html> <head> <meta charset="utf-8"> <title>Checkbox的练习</title& ...

  8. jQuery实现CheckBox全选、全不选

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. js及jQuery实现checkbox的全选、反选和全不选

    html代码: <label><input type="checkbox" id="all"/>全选</label> < ...

随机推荐

  1. VS2017 未找到编译器可执行文件 csc.exe

    vs2017 网站报错 原因Web.config是中下面这段:注释就可以了 <!--<system.codedom> <compilers> <compiler l ...

  2. 使用ajax分页查询

    controller: /** * 查询所有用户/查找指定用户 * 分页+搜索 * */@RequestMapping("/findClientBySize")@ResponseB ...

  3. oo第四次总结

    1.论述测试与正确性论证的效果差异,比较其优缺点 测试:通过大量测试样例覆盖测试代码,来检测代码功能的实现是否正确是否完善.正确性论证:通过对代码规格和逻辑的严密分析,推论和证明,来验证代码实现的正确 ...

  4. Swift之Swift编码规范

    swift 支持的 markdown 语法. 1. 编码格式 1.1 使用二元运算符(+, -,==, 或->)的前后都需要添加空格 let value = + 1.2 在逗号后面加一个空格 l ...

  5. Python基础知识点小结

    1.Python基础知识 在Python中的两种注释方法,分别是#注释和引号('''   ''')注释,#注释类似于C语言中的//注释,引号注释类似于C语言中的/*   */注释.接着在Python中 ...

  6. IP，IP地址，mac地址

    IP地址与IP是两个不同的概念.单独讲IP,是指IP协议 IP地址分为三类:单播地址(目的为单个主机):多播地址(目的端为同一组的所有主机):广播地址(目的端为网络上所有给定的主机) ip地址由网络和 ...

  7. Spark DateType cast 踩坑

    前言 在平时的 Spark 处理中常常会有把一个如 2012-12-12 这样的 date 类型转换成一个 long 的 Unix time 然后进行计算的需求.下面是一段示例代码: val sche ...

  8. 【Solution】API测试工具，访问方式

    1. post的时候,@requestBody 用 json的传递方式

  9. [linux系统]XFS (vda3):Corruption detected.Unmount and run xfs_repair 简单解决办法

    今天kvm的centos系统,rm -rf时报错,具体如下: rm: cannot remove ‘log-0/case1/log_net’: Input/output errorrm: cannot ...

  10. JavaScript实现RSA加解密

    在GitHub上找到jsencrypt.js对RSA加解密的工具文件,地址分别是:https://github.com/travist/jsencrypt和https://github.com/ope ...