JQuery实现shift键多选

最新推荐文章于 2023-05-10 16:50:36 发布

ZDX_Y

最新推荐文章于 2023-05-10 16:50:36 发布

阅读量6.4k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： javascript HTML 文章标签： php html jquery javascript checkbox

本文链接：https://blog.youkuaiyun.com/ZDX_Y/article/details/51525999

javascript 同时被 2 个专栏收录

5 篇文章

订阅专栏

HTML

4 篇文章

订阅专栏

这篇博客介绍了如何利用jQuery实现shift键多选的功能，适用于需要批量选择的场景。作者提供了具体的JavaScript代码示例，包括点击事件处理、shift键判断以及选中项的高亮显示。代码实现了一个功能，当用户点击li元素并按住shift键时，会选择从上次点击到当前点击之间所有元素，反之则只切换当前元素的选择状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这次封闭开发中因为台站选中的时候方便选择，需要通过shift键进行多选，找了网上很多关于多选复选反选的，大部分都是通过Checkbox方法实现的；下面的是具体的demo,别人已经实现了，按着自己的理解重写了一下，理解代码，毕竟js还得花大把时间仔细学习下。

<! DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"  >
</head>
<script type="text/javascript" src="./jquery-1.7.1.min.js"></script>
<script>
var Click=new Array();
    function shift_select(){
	$(".select li").click(function (e){
	Click.push($(".select li").index($(this)))
	if(e.shiftKey){
	    var iMin = Math.min(Click[Click.length-2],Click[Click.length-1])
		var iMax = Math.max(Click[Click.length-2],Click[Click.length-1])
		for(i=iMin;i<=iMax;i++){
		$(".select li:eq("+i+")").addClass("selected")  //为li 标签添加selected类
		}
	}else{
	    $(this).toggleClass("selected");
	}
	});
	}
	$(function(){
	  shift_select();
	});
	document.onselectstrat=function(event){   //避免文字被选中
	  event = window.event||event;
	  event.returnValue = false;
	}
</script>
<style>
.selected{background:#AAAAD8;}
li{cursor:pointer;background:tan;}
</style>
<body>
<div class="select">
<ul>
    <li>yanyan</li>
    <li>yanyan</li>
    <li>yanyan</li>
    <li>yanyan</li>
    <li>yanyan</li>
    <li>yanyan</li>
    <li>yanyan</li>
    <li>yanyan</li>
    <li>yanyan</li>
    <li>yanyan</li>
    <li>yanyan</li>
    <li>yanyan</li>
    <li>yanyan</li>
    <li>yanyan</li>
    <li>yanyan</li>
    <li>yanyan</li>
    <li>yanyan</li>
    <li>yanyan</li>
    <li>yanyan</li>
    <li>yanyan</li>
    <li>yanyan</li>
    <li>yanyan</li>
    <li>yanyan</li>
    <li>yanyan</li>
    <li>yanyan</li>
    <li>yanyan</li>
    <li>yanyan</li>
    <li>yanyan</li>
    <li>yanyan</li>
    <li>yanyan</li>
</ul>
</div>
</body>
</html>