按shift/ctrl键点击选择div

稿件来源: 阳光企业网站管理系统   撰稿作者: 太阳光   发表日期: 2012-09-18   阅读次数: 212   查看权限: 游客查看

有一个列表,里面有多个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>

关键词: jquery,shift,ctrl选择   编辑时间: 2012-09-18

  • 感到高兴

    1

    高兴
  • 感到支持

    0

    支持
  • 感到搞笑

    0

    搞笑
  • 感到不解

    0

    不解
  • 感到谎言

    0

    谎言
  • 感到枪稿

    0

    枪稿
  • 感到震惊

    0

    震惊
  • 感到无奈

    0

    无奈
  • 感到无聊

    0

    无聊
  • 感到反对

    0

    反对
  • 感到愤怒

    0

    愤怒
100%(1)
0%(0)
共有0 条评论 发言请遵守【相关规定

网友评论

会员头像
发 表同步腾讯微博    验证码:  点击更新请先登陆
  • 暂无评论
关闭模块文章图片 article Pictrue
  • 我的妈妈爸爸
  • 基于koa2+mysql+vue2.0+Element阳光内容管理系统
  • 代码覆盖率工具 Istanbul 入门教程
  • 全栈工程师的武器——MEAN
  • 9款超炫的 CSS3 复选框(Checkbox)
  • 微信开发在线翻译功能
  • CSS3那些不为人知的高级属性
  • 给easyui的datebox添加清空事件
  • flash写字效果
  • kendoUI系列教程之DropDownList下拉菜单
  • kendoUI系列教程之datetimepicker日期时间选择
  • kendoUI系列教程之datepicker日期选择
  • kendoUI系列教程之combobox下拉列表框
  • kendoUI系列教程之colorpicker
  • kendoUI系列教程之calendar日历表
  • kendoUI系列教程之autocomplete自动补齐