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. 嵌入式linux内存越界定位和解决 （转）

    https://blog.csdn.net/meejoy/article/details/41729585 https://blog.csdn.net/killmice/article/details ...

  2. NoSuchMethodError 问题

    最近maven升级到gradle后,总是报NoSuchMethod error.然后 ,报错的类确实是有这个方法,一切看起来都没有问题.那么运行时jvm到底加载的哪里的类呢?有没有相关的命令可以查询, ...

  3. jmeter数据库连接配置

    一.实际试过的mysql配置 1.导入一个JDBC jar包(我是直接把jar包放在了jmeter的lib目录),包:mysql-connector-java-5.1.7-bin.jar 2.设置JD ...

  4. 2. Scala变量

    2.1 变量是程序的基本组成单位 举一个简单的例子 object boke_demo01 { def main(args: Array[String]): Unit = { var a: Int = ...

  5. 理解npm run

    引言 ReactNative 开发中经常用到一些npm run的命令来打包.最近在这上面踩了一个坑,所以研究了一下. 在阅文做了两个ReactNative混合开发的项目,都用npm run bundl ...

  6. 一、使用官方工具建立空springboot

          自己搭过springboot,看的官网,一点点自己弄,集成druid,做了些例子,从0到1弄了一下午. 当时没看到有工具可用,可以把依赖都加上,简称STS.       下载地址: htt ...

  7. [开发笔记]--把input框设置成font-size:0埋下的坑。

    vue项目上开发了一个输入pin码的组件.在某些安卓机器上.用户点击键盘后会自动失去焦点自动收起键盘.经过排查,发现是css属性font-size设置成0导致的.

  8. python celery多worker、多队列、定时任务

    python celery多worker.多队列.定时任务  

  9. HRY and codefire

    传送门: 设 dp[i][j]为第一个号i等级,第二个号j等级的期望值 a[i]存每个等级上分的概率 dp[i][j]=a[i]*dp[i+1][j]+(1-a[i])*dp[j][i]+1 dp[j ...

  10. python下载及安装

    1, 许多新学员不知道开始学Python需要安装什么,需要准备什么,特地写下这篇文档给一脸懵逼的新同学们作为指导文档. 2, 首先,学Python需要有一台电脑,这是必须的.老师的系统是windows ...