jquery-demo
/
444.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery2.0.3.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<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" />
		<input type="text" id="bb" 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>
	</body>
</html>