按住ctrl，点击鼠标点击选中多个的操作

Question

有一个列表，里面有多个div，现在要实现按住ctrl键，用鼠标点击能选中多个的效果。或是按住shit键，用户点击鼠标可以一次性选择多个的效果。用jquery或是js怎么实现？？
急～～～～～～～～～～～～～求高手解答

Answer 1

shift的框选需要判断坐标，不那么容易ctrl这个，思想就是用一个变量记录ctrl键的状态，就是一个bool值，onkeydown事件中判断ctrl按下将该标志设为true，onkeyup事件中是ctrl设为false，这样该bool值就是ctrl键的状态了
鼠标点击事件中判断该bool值，若为真，说明ctrl处于按下状态，此时点击选择的结果加入到前面的选择结果中；若该bool值为false，说明ctrl没有按下，这时，应该产生新的选择结果集其实多选用选择框checkbox做才是正理

Answer 2

在div的onclick函数里获取按键，用JS处理，如果按了Ctrl，就不用清空先前的选择,不知可行不

Answer 3

<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>

Answer 4

CTRL键没必要，不用按CTRL的时候，也应该实现类似你说的按CTRL的多选效果。
SHIFT键的作用还是挺有用的。

Answer 5

这是实现类似系统文件选取效果：
单击：只能选择一个；
ctrl:一个个累选（重选变成取消选择）
shift:是连续选择

Answer 6

感觉你用checkbox不是更方便吗。

Answer 7

不用按CTRL的时候，也应该实现类似你说的按CTRL的多选效果???求解答！

Answer 8

意思就是说，实现CTRL的复合键没好大必要。
web上的一些操作，毕竟还是和OS中不同。
OS中你选中一个文件，不按住CTRL就去选另一个文件时，前面的文件选中状态就被默认取消了
web中不同，我每选中一个文件，我都可以让它的选中状态一直被保存，直到我去取消。因为不管怎么样，在事件个体上你仍然有一个比如click的事件绑定，你直接在click中处理选中的逻辑就可以了。只要你不在逻辑中添加上选中当前项就取消其他项的处理，那么被选中的状态就将一直被保留。除非你要求一定要CTRL+click才能选中SHIFT因为有个一次性连选的功能在里，比如你先选中第一项，然后我按SHIFT再去选第十项，这十项就都可以被选择到，这个才算是额外的功能

Answer 9

抛开需求来讲，是没必要做Ctrl.而且程序会更简单一点。<script type="text/javascript">
$(document).ready(function(){
    var key=false;  //记录shift键
    var val=",";//记录已经选择的值
    var ibe =-1; //记录初始值
    $(window).keydown(function(e){
        if(e.shiftKey)key=true;
    }).keyup(function(){
            key=false;
    });
    $("#list div").click(function(){
        var i=$(this).index();
        if(ibe!=-1&&key){
            $(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(val.indexOf(","+i+",")!=-1){
                val=val.replace(","+i+",",",");
                $(this).removeAttr("class");
            }else{
                val+=i+",";
                $(this).addClass("on");
                ibe=i;
            }
        }
        $("#tt").val(val);
    });
});
</script>运行前确保你连接了jquery.js

Answer 10

我借用下4楼的样式定义吧<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>
<script type="text/javascript">
Array.prototype.inArray=function (value){for (var i=0;i<this.length;i++){if (this[i] == value){return true;}}return false};
$(function(){
    var key=0;
    var ind=new Array();
    function shiftSelect(a,b){
        for(i=a;i<b;i++){
            $("#list div").eq(i).addClass("on");
            if(!ind.inArray(i)){
                ind.push(i);
                ind.sort(function(a,b){return b-a})
            }
        }
    }
    $(window).keydown(function(e){
        key=e.keyCode||e.which||e.charCode;
    }).keyup(function(){key=0});
    $("#list div").bind({
        "keydown":function(e){
             key=e.keyCode||e.which||e.charCode;
        },
        "keyup":function(){
             key=0;
        },
        "click":function(){
            var index=$(this).index();
            $(this).toggleClass("on");
            if($(this).attr("class")=="on" && !ind.inArray(index)){
                ind.push(index);
                ind.sort(function(a,b){return b-a})
            }
            if(key==16){
                if(index>ind[ind.length-1]){
                    shiftSelect(ind[ind.length-1],index);
                }else if(index<ind[0]){
                    shiftSelect(index,ind[0]);
                }
            }
        }
    })
})
</script>

Answer 11

修正一下我上面贴的，虽然效果一样，但逻辑上有错误
因为是偷懒，用的jquery,因此，你需要在页面中加载jq库<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<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>
<script type="text/javascript">
Array.prototype.inArray=function (value){for (var i=0;i<this.length;i++){if (this[i] == value){return true;}}return false};
$(function(){
    var key=0;
    var ind=new Array();
    function shiftSelect(a,b){
        for(i=a;i<=b;i++){
            $("#list div").eq(i).addClass("on");
            if(!ind.inArray(i)){
                ind.push(i);
                ind.sort(function(a,b){return b-a})
            }
        }
    }
    $(window).keydown(function(e){
        key=e.keyCode||e.which||e.charCode;
    }).keyup(function(){key=0});
    $("#list div").bind({
        "keydown":function(e){
             key=e.keyCode||e.which||e.charCode;
        },
        "keyup":function(){
             key=0;
        },
        "click":function(){
            var index=$(this).index();
            if(key==16){
                if(index>ind[0]){
                    shiftSelect(ind[0],index);
                }else if(index<ind[ind.length-1]){
                    shiftSelect(index,ind[ind.length-1]);
                }
            }else{
                $(this).toggleClass("on");
                if($(this).attr("class")=="on" && !ind.inArray(index)){
                    ind.push(index);
                    ind.sort(function(a,b){return b-a})
                }
            }
            
        }
    })
})
</script>

Answer 12

$(window).keydown(function(e) 改成 $(document).keydown(function(e) 或 $("#list").keydown(function(e) 都可，IE不支持$(window).keydown() 这我倒没注意到。

Answer 13

呵呵，我一开始是先给div绑了，发现在非IE中事件不支持，所以在外面写了个$(window)。没想去写$(document)，直接绑定它就可以了，div就不用绑了。又记到个东东。有收获

Answer 14

万分感谢xzy21com和crying_boy两位的热心帮助！！！

Answer 15

这个是有成熟的插件的，jquary ui selectTable