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