按shift/ctrl键点击选择div

【Javascript】

下载

新闻

文章

有一个列表，里面有多个div，现在要实现按住ctrl键，用鼠标点击能选中多个的效果。或是按住shit键，用户点击鼠标可以一次性选择多个的效果。

这是来源CSDN的一个请求：
有一个列表，里面有多个div，现在要实现按住ctrl键，用鼠标点击能选中多个的效果。或是按住shit键，用户点击鼠标可以一次性选择多个的效果。用jquery或是js怎么实现？？http://topic.csdn.net/u/20120917/15/e77b06ab-b8b3-45d6-8b55-294f9597d20e.html?31336

<!DOCTYPE>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>div 选取</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<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:166px" />
<script type="text/javascript">
    $(document).ready(function(){
        var key=0;  //记录ctrl/shift键
        var val=",";//记录已经选择的值
        var ibe =-1; //记录初始值
        $(document).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>
</body>
</html>