js按键+鼠标控制列表选中

最新推荐文章于 2024-10-01 23:23:32 发布

TAREKtechnique

最新推荐文章于 2024-10-01 23:23:32 发布

阅读量702

点赞数 1

文章标签： checkbox html js select function

本文链接：https://blog.csdn.net/qq_20773675/article/details/42015875

版权

本文介绍了一种使用JavaScript结合Ctrl或Shift按键与鼠标操作来实现列表选择的方法，旨在提供一种类似Windows资源管理器的用户体验，提高列表操作效率。通过js代码，可以轻松实现多选和连续选中列表项。

摘要由CSDN通过智能技术生成

js组合按键控制选择列表

在网页中列表展示后可以对其进行基本操作，如删除、修改等，传统的做法是用checkbox选择，操作过程麻烦，有一种操作方式更人性化，熟悉windows用户资源管理器文件操作方式一样，按Ctrl或Shift+鼠标等组合操作就可方便的选择列表：

js代码:

function hoverPinInit() {
    $(".hover").hover(
        function(){
            $(this).addClass("hovered")
        },
        function() {
            $(this).removeClass("hovered")
        }
    )
//    以下为控制组合按键选择
    $(".hover").click(function(e) {
    	var ele = $(this)
    	if(e.shiftKey){
    		var startIndex = 0 //默认开始索引
    		var listBox = ele.parent() //限制事件的范围
    		var activeE = listBox.find(".active")
    		var index1 = activeE.first().index() //得到第一次被选中的索引
    		var cIndex = ele.index() //当前被选中的索引
//    		如果没有被选中的元素则默认为从第一个开始选
    		if(index1!=-1){ 
    			startIndex = index1
    		}
    		var startI = startIndex
    		var endI = cIndex
    		if(startIndex>cIndex){
    			startI = cIndex
    			endI = startIndex
    		}
    		for(var i=startI;i<=endI;i++){
    			listBox.find(".hover").eq(i).addClass("active")
    		}
		}else if(e.ctrlKey){
    		if(ele.hasClass("active")){
    			ele.removeClass("active")
    		}else{
    			ele.addClass("active")
    		}
    	}else{
            $(".hover").removeClass("active")
			ele.addClass("active")
    	}
    })
}

HTML: