Jquery实现checkbox按shift多选

时间：2022-09-01 07:45:39

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方法（全选、全不选、至少选择一个、选择值&sol;文本）

    原文: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&quot ...

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

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

  6. jquery实现checkbox的全选

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

  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> &lt ...

随机推荐

  1. 我常用的eclipse快捷键

    重写父类方法:右键点击, 进source,进override/implement 单行注释(或多行注释) Ctrl+/ 文档注释:shift+alt+J 整块注释: Ctrl+shift+/ 取消整块 ...

  2. dubbo 使用总结

    第一步: 安装注册中心Register,这里选择 zookeeper 1.zookeeper下载url:http://zookeeper.apache.org; 2.下载解压完后如下: 3.将zoo_ ...

  3. CSS基础（一）：开篇

    背景 HTML是一种超文本标记语言,用来定义文档的结构和内容,例如标题.段落和列表等等,而文档内容如何渲染.如何展示,这就需要样式来修饰了.CSS正是可以与HTML很好地结合.如果将HTML比作水,那 ...

  4. linux工具类之硬盘检测

    软raidmount /dev/md0 /opt                [root@localhost root]# cp /usr/share/doc/raidtools-1.00.3/ra ...

  5. poj 2312 Battle City

    题目连接 http://poj.org/problem?id=1840 Battle City Description Many of us had played the game "Bat ...

  6. S2 结业考试前改错汇总

    1. PS:正确答案是A:枚举是值类型,一个类的对象是引用类型. 2. 每张表最多包含1个聚集索引.并且聚集索引会决定记录储存的物理位置.聚集索引不一定要建立在主键字段上.一张表可以没有任何索引. 3 ...

  7. IP 碎片重组

    IP 碎片重组 内核中的IP重组函数. struct sk_buff * ip_defrag(struct sk_buff * skb, u32 user) { ...... //如果内核范围超出限制 ...

  8. jsp当参数为空的时候默认显示值

    当${business.branchName }为空或者不存在的时候显示“请选择门店” <c:out value="${business.branchName }" defa ...

  9. silverlight与wcf双向通讯 例子

    本文将建立一个silverlight与wcf双向通讯的简单实例,以下是详细步骤: 新建Silverlight应用程序,名称WCFtest.解决方案中添加WCF服务应用程序,名称WcfServiceTe ...

  10. HDOJ2008-数值统计

    Problem Description 统计给定的n个数中,负数.零和正数的个数.   Input 输入数据有多组,每组占一行,每行的第一个数是整数n(n<100),表示需要统计的数值的个数,然 ...

相关文章