jQuery 处理Ctrl 和shift 实现多选功能

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

Coder_Yu

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

阅读量2.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： jquery

本文链接：https://blog.youkuaiyun.com/yuxi1314521/article/details/41147993

jquery 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了如何利用jQuery结合Ctrl和Shift键实现多选功能，适用于网页表格或列表中，提供了一种高效的选择多项数据的方法。

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

<span style="font-size:18px;"><style type="text/css">
    #list div,#list .on{
        width:200px;
        border: 1px solid #ddd;
        margin: 2px;
        cursor: pointer;
    }
    #list .on{
        border: 1px solid red;
        background-color: #fff731
    }
</style>
<div id="list">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
</div>
<input type="text" id="tt" style="width:200px" />
<script type="text/javascript">
$(document).ready(function(){
    var key=0;  //记录ctrl/shift键
    var val=",";//记录已经选择的值
    var ibe =-1; //记录初始值
    $(window).keydown(function(e){
        if(e.ctrlKey){
            key=1;
        }else if(e.shiftKey){
            key=2;
        }
        $("#bb").val("初始值:"+ibe+" key:"+key);
    }).keyup(function(){
            key=0;
    });
    $("#list div").click(function(){
        var i=$(this).index();
        if(ibe!=-1&&key==2){
            $(this).siblings().removeAttr("class");
            val=",";
            for(var ii=Math.min(i,ibe);ii<=Math.max(i,ibe);ii++){
                val+=ii+",";
                $("#list div").eq(ii).addClass("on");
            }
        }else if(key==1){
            if(val.indexOf(","+i+",")!=-1){
                val=val.replace(","+i+",",",");
                $(this).removeAttr("class");
            }else{
                val+=i+",";
                $(this).addClass("on");
                ibe=i;
            }
        }else{
            $(this).addClass("on").siblings().removeAttr("class");
            ibe=i;
            val=","+i+",";
        }
        $("#tt").val(val);
    });
});
</script></span>