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. nregistering JMX-exposed beans

    https://blog.csdn.net/yang474231561/article/details/81738632 https://stackoverflow.com/questions/507 ...

  2. css学习_css3伸缩布局 flex布局

    1.flex布局 案例一: 案例二:   保证不至于缩放得太小或太大 案例三:flex的值不一定要写成几份,可以写成固定值 案例四: 竖着3等分(父容器按照高度3等分) !!案例  -----用fle ...

  3. 蓝桥杯九宫重排（bfs+用set去重）

    题目连接 #define _CRT_SECURE_NO_WARNINGS #include<cstdio> #include<iostream> #include<que ...

  4. 屏蔽登录QQ后总是弹出的QQ网吧页面

    不知道从什么时候开始的,每次登录QQ的时候,有个叫qq网吧的页面都会弹出来,腾讯你是撒吗?这个公司真是死性不改.按照它的提示,已经设置了好几次这是我家,这特么不是网吧,然并卵.你说它技术不行吧,它堪称 ...

  5. 创建vs离线安装程序（不联网安装vs）

    https://blog.csdn.net/u013064585/article/details/80996933

  6. yum 运行失败

    https://stackoverflow.com/questions/47633870/rpm-lib64-liblzma-so-5-version-xz-5-1-2alpha-not-found- ...

  7. 谷歌AM HTML视频代码amp-video示例

    ntroduction Use amp-video to embed videos into your AMP HTML files. Video source files must be serve ...

  8. 并发编程实战1-chap1-2-斗者6星

    一.线程安全性 1.线程安全关注点:对共享的和可变的状态的访问 2.JAVA同步机制:synchronized.volatile.显示锁.原子变量 3.无状态对象一定是线程安全的:不包含任何域,也不包 ...

  9. Leetcode: The Maze III(Unsolved Lock Problem)

    There is a ball in a maze with empty spaces and walls. The ball can go through empty spaces by rolli ...

  10. 后台发送get请求

    第一步:编写Controller,让后台去请求接口 package controller; import java.util.List; import org.springframework.bean ...