用js实现shift+单击来选择多项

由于工作需要,在web项目的几个批量处理功能中使用js来实现shift+点击左键选择连续的多项,通过查阅了下网上资源,挑了一种简单的实现方式,这里做个简单的记录和共享。

         主要参考的资源:http://blog.sina.com.cn/s/blog_94eb1a960100zl7z.html

         主要涉及到的技术:html    javascript    jquery(这里为了写js方便就加入了该框架)

         该操作的实现思想:

                   1.记录下每次点击事件的元素在列表中的索引,放入数组中

                   2.判断点击事件时shift是否被按下,如被按下则取出数组中最后放入的两个索引

                   3.根据取出的索引,来取出在该索引范围内列表中的元素,并根据需要做处理

         下面是简单的实现代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery-1.10.2.js"></script>
<script type="text/javascript">
var rem=new Array();
    function shift_select(){
        $(".box div").click(function (e){
            rem.push($(".box div").index($(this)))
            if(e.shiftKey){
                var iMin =  Math.min(rem[rem.length-2],rem[rem.length-1])
                var iMax =  Math.max(rem[rem.length-2],rem[rem.length-1])
                for(i=iMin;i<=iMax;i++){
                    $(".box div:eq("+i+") input[type=checkbox]").prop("checked",true);
			        //这边部分为逻辑代码,你可以根据需要来处理全中的div
                   //$(".box div:eq("+i+")")这为选中的div
                }
            }else{
                $(this).toggleClass("selected");
            }
        });
    }
    $(function(){
        shift_select();
    });
   
//与程序无关,是禁止鼠标选中文字。点选的时候容易选中文字 太讨厌 。
document.onselectstart=function(event){
    event = window.event||event;
    event.returnValue = false;
}
</script>
<style type="text/css">
    .selected{background:tan;}
    p{ cursor:pointer; background:#f0f0f0}
</style>
</head>
<body>
<div class="box">
<div><input type="checkbox" value="1" />hello1</div>
<div><input type="checkbox" value="1" />hello2</div>
<div><input type="checkbox" value="1" />hello3</div>
<div><input type="checkbox" value="1" />hello4</div>
<div><input type="checkbox" value="1" />hello5</div>
<div><input type="checkbox" value="1" />hello6</div>
<div><input type="checkbox" value="1" />hello7</div>
<div><input type="checkbox" value="1" />hello8</div>
<div><input type="checkbox" value="1" />hello9</div>
<div><input type="checkbox" value="1" />hello10</div>
<div><input type="checkbox" value="1" />hello11</div>
<div><input type="checkbox" value="1" />hello12</div>
<div><input type="checkbox" value="1" />hello13</div>
<div><input type="checkbox" value="1" />hello14</div>
<div><input type="checkbox" value="1" />hello15</div>
<div><input type="checkbox" value="1" />hello16</div>
<div><input type="checkbox" value="1" />hello17</div>
<div><input type="checkbox" value="1" />hello18</div>
</div>
</body>
</html>


注意事项:

         1.以上代码中需要引入jquery文件,网络jquery文件地址为:

                   http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js

           用该地址代替<scripttype="text/javascript"src="jquery-1.10.2.js"></script>中src值的部分就行,不过访问比较慢,建议引入本地的jquery文件,下面会提供demo的下载地址,里面有jquery文件

         2.页面中document.onselectstart=function(event)函数是禁止鼠标选中文字,主要是在选择的时候文字会出现选择的状态,会降低用户体验。如果页面中其他地方有需要需要鼠标选中文字的功能,该函数可自行根据需要处理。

demo下载地址:http://pan.baidu.com/s/1i33yxox

截图看不出来效果,需要看效果可以下载demo或者复制代码自行创建demo

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值