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

来源：互联网发布：unity3d找工作好难编辑：程序博客网时间：2024/06/05 20:54

由于工作需要，在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

0 0