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. XML自学笔记

    1.    xml指可扩展标记语言,(extensible markup language),该语言被设计用来传输和存储数据,HTML被设计用来显示数据 XML标签没有被预定义,需要自定义标签:XML ...

  2. Java中的字符串截取(substring)的使用

    import java.util.*; public class ZiFu { public static void main(String args[]){ System.out.println(& ...

  3. WebBrowser 打印

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="RTMInterViewInfo ...

  4. 保护url时效性和安全性的一种解决方案

    几乎都是同事小哥哥帮我铺路,给我参考链接,实现的理论方法以及知识,我只剩下看资料,敲代码,出错了也是他帮我看着一步步解释搞定过来的.嗯,大好人一枚. ok,思路: 是生成一个随机数放在url里面,当做 ...

  5. C语言扫盲及深化学习

    c语言特点: (1)效率高 (2)控制性强 (3)硬件亲和性好 (4)可移植性高 一.关于注释 c语言中注释不能嵌套,因此注释代码时一定要注意源代码中是否已经存在注释.要从逻辑上删除一段代码,利用预编 ...

  6. webpack 4.0 配置文件 webpack.config.js文件的放置位置

    一般webpack.config.js是默认放在根目录的,不在根目录的时候需要在package.json中制定位置,我的配置文件目录是config/webpack.config.js,在package ...

  7. pwn学习日记Day2 基础知识积累

    知识杂项 shell-storm.org的shellcode数据库 使用pwntools库把shellcode作为输入传递给程序,尝试使用io.interactive()与程序进行交互,发现可以执行s ...

  8. ORA-27104: system-defined limits for shared memory was misconfigured与Linux内核参数配置有关的案例

    ```[oracle@WWJD01 ~]$ sqlplus / as sysdba SQL*Plus: Release 12.2.0.1.0 Production on Fri Sep 21 15:1 ...

  9. Python基础(六) python生成xml测试报告

    思路: 1.使用xslt样式,这样可以很好的和xml结合,做出漂亮的报告 2.生成xml结构 xslt样式是个很有意思,也很强大的,现在用的很多,很方便就能做出一个漂亮的报告,可以百度一下,语法相当简 ...

  10. Kafka笔记8（管理Kafka）

    使用kafka-topic.sh工具可以执行大部分操作   创建/修改/删除/查看集群里的主题.要使用全部功能,需要通过--zookeeper参数提供zookeerper连接字符串 创建主题: 创建主 ...