html中用shift实现区域选择_on-shift可以用在html里吗-CSDN博客

本文链接：https://blog.csdn.net/ayueiloveyou/article/details/1792478
此例实现了shift多选,可把下面的文件运行看到结果

 
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<SCRIPT LANGUAGE="JavaScript">
<!--
var count=0;
var temp;
function sel(num,obj){
   if(event.shiftKey){
    if(count==1){
     check(temp,num);
     count=0;
    }else{
     temp=num;
     count++;
    }
   
   }else{
    count=0;
   }
  
}
function check(start,end){
var array1=start.split("_");
var array2=end.split("_");
var sf=parseInt(array1[0]);
var ss=parseInt(array1[1]); 
var ef=parseInt(array2[0]);
var es=parseInt(array2[1]);
var start1=parseInt(sf+""+ss);
var end1=parseInt(ef+""+es);
if(start1<end1){
   if(ss<=es){
    for(var i=sf;i<=ef;i++){
     for(var j=ss;j<=es;j++){
      //document.getElementById(i+""+j).checked=true;
      reverse(i+"_"+j);
     
     }
    }
   }else{
    for(var i=sf;i<=ef;i++){
     for(var j=ss;j>=es;j--){
     
      reverse(i+"_"+j);
     }
    }
   }
   reverse(start);
   reverse(end);
}else if(start1>end1){
   if(ss<=es){
    for(var i=ef;i<=sf;i++){
     for(var j=es;j>=ss;j--){
      //document.getElementById(i+""+j).checked=true;
      reverse(i+"_"+j);
     }
    }
   }else{
    for(var i=ef;i<=sf;i++){
     for(var j=es;j<=ss;j++){
    
      reverse(i+"_"+j);
     }
    }
   }
   reverse(start);
   reverse(end);
}else{}
}
function reverse1(i){
if(document.getElementById(i).checked){
document.getElementById(i).checked=false;
}else{
document.getElementById(i).checked=true;
}
}
function reverse(i){
document.getElementById(i).checked=true;
}
function alls(i){
count=0;
var obj=document.form1.ch;
if(i==1)
   for(var i=0;i<obj.length;i++){
    obj[i].checked=true;
   }
else
   for(var i=0;i<obj.length;i++){
    obj[i].checked=false;
   }
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<form name="form1">
<table border="0">
<tr>
<td>
<INPUT id="0_1" TYPE="checkbox" NAME="ch" value="01" onclick="sel('0_1',this)">
</td>     
<td>      
<INPUT id="0_2" TYPE="checkbox" NAME="ch" value="02" onclick="sel('0_2',this)">
</td>     
<td>      
<INPUT id="0_3" TYPE="checkbox" NAME="ch" value="03" onclick="sel('0_3',this)">
</td>      
<td>       
<INPUT id="0_4" TYPE="checkbox" NAME="ch" value="04" onclick="sel('0_4',this)">
</td>       
<td>        
<INPUT id="0_5" TYPE="checkbox" NAME="ch" value="05" onclick="sel('0_5',this)">
</td>     
<td>      
<INPUT id="0_6" TYPE="checkbox" NAME="ch" value="06" onclick="sel('0_6',this)">
</td>     
<td>      
<INPUT id="0_7" TYPE="checkbox" NAME="ch" value="07" onclick="sel('0_7',this)">
</td>       
</tr>       
<tr>        
<td>        
<INPUT id="1_1" TYPE="checkbox" NAME="ch" value="11" onclick="sel('1_1',this)">
</td>     
<td>      
<INPUT id="1_2" TYPE="checkbox" NAME="ch" value="12" onclick="sel('1_2',this)">
</td>   
<td>    
<INPUT id="1_3" TYPE="checkbox" NAME="ch" value="13" onclick="sel('1_3',this)">
</td>    
<td>     
<INPUT id="1_4" TYPE="checkbox" NAME="ch" value="14" onclick="sel('1_4',this)">
</td>      
<td>       
<INPUT id="1_5" TYPE="checkbox" NAME="ch" value="15" onclick="sel('1_5',this)">
</td>     
<td>      
<INPUT id="1_6" TYPE="checkbox" NAME="ch" value="16" onclick="sel('1_6',this)">
</td>   
<td>    
<INPUT id="1_7" TYPE="checkbox" NAME="ch" value="17" onclick="sel('1_7',this)">
</td>      
</tr>      
<tr>       
<td>       
<INPUT id="2_1" TYPE="checkbox" NAME="ch" value="21" onclick="sel('2_1',this)">
</td>    
<td>     
<INPUT id="2_2" TYPE="checkbox" NAME="ch" value="22" onclick="sel('2_2',this)">
</td>     
<td>      
<INPUT id="2_3" TYPE="checkbox" NAME="ch" value="23" onclick="sel('2_3',this)">
</td>   
<td>    
<INPUT id="2_4" TYPE="checkbox" NAME="ch" value="24" onclick="sel('2_4',this)">
</td>    
<td>     
<INPUT id="2_5" TYPE="checkbox" NAME="ch" value="25" onclick="sel('2_5',this)">
</td>      
<td>       
<INPUT id="2_6" TYPE="checkbox" NAME="ch" value="26" onclick="sel('2_6',this)">
</td>     
<td>      
<INPUT id="2_7" TYPE="checkbox" NAME="ch" value="27" onclick="sel('2_7',this)">
</td>
</tr>
<tr><td colspan="7"><input type="button" value="全选" onclick="alls(1)"/><input type="button" value="取消全选" onclick="alls(0)"/></td></tr>
<tr><td colspan="7"><font color="red" size="2">按住Shift后再选两个复选框，实现多选。</font></td></tr>
</table>
</form>
</BODY>
</HTML>
 