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. request之额外路径

    谈到额外路径 ,首先要明白映射路径,映射路径是servlet处理的路径,在web.xml中配置.比如配置一个/emp的映射路径,意味着客户端可以通过http:+项目路径+/emp访问服务器的项目,而所 ...

  2. java实现求最大子数组和的逐步显示

    package 最大的子数组和; import java.util.Scanner; public class shuzu { public static int maxArr(int a[]) { ...

  3. django的分页与添加图片

    分页: 在主页面的views里写接口 导包: from django.core.paginator import Paginator 接口: id=request.GET.get("page ...

  4. go/wiki/MutexOrChannel Golang并发：选channel还是选锁？

    https://mp.weixin.qq.com/s/JcED2qgJEj8LaBckVZBhDA https://github.com/golang/go/wiki/MutexOrChannel M ...

  5. 第二次C语言实验

    Part1: printf(),scanf()函数的用法 /* C语言程序设计教程学习指导>p119 实验内容(2) 这是一个格式化输入输出函数及格式符使用练习 找出两处错误,修改并运行程序 为 ...

  6. less命令查看文件时的常用操作

    下键或者回车:往下一行 D:往下半页 空格和f:往下一页 上键:往上一行 B:往上一页 shift+G:直接切到末尾 ?+搜索条件:从下往上搜索 /+搜索条件:从上往下搜索

  7. ASA failover

    Active-Standby 1.作用:提供设备冗余 2.物理概念:primary 和 secondary ,需要命令敲得,角色不会切换, 3.虚拟概念:active和standby ,需要选举,角色 ...

  8. __add__，关于运算符重载（用户权限）

    1.首先定义三种用户类型:普通用户.管理员.超级管理员,不同用户类型的用户权限关系如下: 先看一段代码: class Scope(): # 定义一个基类,因为每个权限类都需要add()方法 allow ...

  9. 玩转PIL >>> 玩转photo

    前:1.使用图片放在文件最后,需要的请自行下载 2.运行环境win10家庭版,已经安装好pillow库 一.学习总结 PIL库支持图像的储存,显示和处理,几乎能处理所有的图片格式,可以完成对图像的缩放 ...

  10. Java 数据库程序设计

    数据库基础 目前,大多数数据库系统都是关系数据库系统(relational database system).该数据库系统是基于关系数据模型的,这个模型有三个要素:结构.完整性和语言 结构(struc ...