首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > JavaScript >

按住ctrl,点击鼠标点符号击选中多个的操作

2012-10-05 
按住ctrl,点击鼠标点击选中多个的操作有一个列表,里面有多个div,现在要实现按住ctrl键,用鼠标点击能选中多

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

[解决办法]

HTML code
<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>
[解决办法]
探讨
引用:

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

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

热点排行