javascript取舍多行
日期：2014-05-18 浏览次数：20664 次
javascript选择多行
在页面中有一个多行的数据显示列表，现在想能通过ctrl加鼠标单击，能够实现多行的选择，请大家帮个忙，给一段事例代码，网上只有单击选中一行的代码
------解决方案--------------------
<html>
<head> <title> CheckBox Selected By Ctrl </title> </head>
<script>
/**
* 给隐藏域的name赋值,便于name组装成一个数组
* @checkIndex 选择的checkBox对象所在的索引下标
* @dataValue 需要对目录对象赋值的值
*/
function datanameEnable(checkIndex,dataValue) {
var target = event.target || event.srcElement;
var checkBoxList = document.getElementsByName(target.name);
var chk = checkBoxList[checkIndex];
if(event.ctrlKey){
var checki=-1;
if(chk.checked){
for(i=checkIndex-1;i> =0;i--){
if(checkBoxList[i].checked && checkIndex!=i){
checki=i;
break;
}
}
if(checki> -1){
if(checkIndex> =checki){
for(j=(checki+1);j <checkIndex;j++){
checkBoxList[j].checked=!checkBoxList[j].checked;;
}
}
}
}else{
var unchecki = -1;
for(k=checkIndex-1;k> =0;k--){
if(!checkBoxList[k].checked && checkIndex!=k){
unchecki=k;
break;
}
}
if(unchecki> -1 && checkIndex> =unchecki){
for(j=unchecki+1;j <checkIndex;j++){
checkBoxList[j].checked=!checkBoxList[j].checked;;
}
}
}
}
}
</script>
<body>
<input type= "checkBox " name= "check " value= "check1 " onclick= "javascript:datanameEnable(0, 'check1 '); "> 记录1 <br>
<input type= "checkBox " name= "check " value= "check2 " onclick= "javascript:datanameEnable(1, 'check2 '); "> 记录2 <br>
<input type= "checkBox " name= "check " value= "check3 " onclick= "javascript:datanameEnable(2, 'check3 '); "> 记录3 <br>
<input type= "checkBox " name= "check " value= "check4 " onclick= "javascript:datanameEnable(3, 'check4 '); "> 记录4 <br>
<input type= "checkBox " name= "check " value= "check5 " onclick= "javascript:datanameEnable(4, 'check5 '); "> 记录5 <br>
<input type= "checkBox " name= "check " value= "check6 " onclick= "javascript:datanameEnable(5, 'check6 '); "> 记录6 <br>
<input type= "checkBox " name= "check " value= "check7 " onclick= "javascript:datanameEnable(6, 'check7 '); "> 记录7 <br>
<input type= "checkBox " name= "check " value= "check8 " onclick= "javascript:datanameEnable(7, 'check8 '); "> 记录8 <br>
<input type= "checkBox " name= "check " value= "check9 " onclick= "javascript:datanameEnable(8, 'check9 '); "> 记录9 <br>
<input type= "checkBox " name= "check " value= "check10 " onclick= "javascript:datanameEnable(9, 'check10 '); "> 记录10 <br>
<input type= "checkBox " name= "check " value= "check11 " onclick= "javascript:datanameEnable(10, 'check11 '); "> 记录11 <br>
<input type= "checkBox " name= "check " value= "check12 " onclick= "javascript:datanameEnable(11, 'check12 '); "> 记录12 <br>
<input type= "checkBox &qu
在页面中有一个多行的数据显示列表，现在想能通过ctrl加鼠标单击，能够实现多行的选择，请大家帮个忙，给一段事例代码，网上只有单击选中一行的代码
------解决方案--------------------
<html>
<head> <title> CheckBox Selected By Ctrl </title> </head>
<script>
/**
* 给隐藏域的name赋值,便于name组装成一个数组
* @checkIndex 选择的checkBox对象所在的索引下标
* @dataValue 需要对目录对象赋值的值
*/
function datanameEnable(checkIndex,dataValue) {
var target = event.target || event.srcElement;
var checkBoxList = document.getElementsByName(target.name);
var chk = checkBoxList[checkIndex];
if(event.ctrlKey){
var checki=-1;
if(chk.checked){
for(i=checkIndex-1;i> =0;i--){
if(checkBoxList[i].checked && checkIndex!=i){
checki=i;
break;
}
}
if(checki> -1){
if(checkIndex> =checki){
for(j=(checki+1);j <checkIndex;j++){
checkBoxList[j].checked=!checkBoxList[j].checked;;
}
}
}
}else{
var unchecki = -1;
for(k=checkIndex-1;k> =0;k--){
if(!checkBoxList[k].checked && checkIndex!=k){
unchecki=k;
break;
}
}
if(unchecki> -1 && checkIndex> =unchecki){
for(j=unchecki+1;j <checkIndex;j++){
checkBoxList[j].checked=!checkBoxList[j].checked;;
}
}
}
}
}
</script>
<body>
<input type= "checkBox " name= "check " value= "check1 " onclick= "javascript:datanameEnable(0, 'check1 '); "> 记录1 <br>
<input type= "checkBox " name= "check " value= "check2 " onclick= "javascript:datanameEnable(1, 'check2 '); "> 记录2 <br>
<input type= "checkBox " name= "check " value= "check3 " onclick= "javascript:datanameEnable(2, 'check3 '); "> 记录3 <br>
<input type= "checkBox " name= "check " value= "check4 " onclick= "javascript:datanameEnable(3, 'check4 '); "> 记录4 <br>
<input type= "checkBox " name= "check " value= "check5 " onclick= "javascript:datanameEnable(4, 'check5 '); "> 记录5 <br>
<input type= "checkBox " name= "check " value= "check6 " onclick= "javascript:datanameEnable(5, 'check6 '); "> 记录6 <br>
<input type= "checkBox " name= "check " value= "check7 " onclick= "javascript:datanameEnable(6, 'check7 '); "> 记录7 <br>
<input type= "checkBox " name= "check " value= "check8 " onclick= "javascript:datanameEnable(7, 'check8 '); "> 记录8 <br>
<input type= "checkBox " name= "check " value= "check9 " onclick= "javascript:datanameEnable(8, 'check9 '); "> 记录9 <br>
<input type= "checkBox " name= "check " value= "check10 " onclick= "javascript:datanameEnable(9, 'check10 '); "> 记录10 <br>
<input type= "checkBox " name= "check " value= "check11 " onclick= "javascript:datanameEnable(10, 'check11 '); "> 记录11 <br>
<input type= "checkBox " name= "check " value= "check12 " onclick= "javascript:datanameEnable(11, 'check12 '); "> 记录12 <br>
<input type= "checkBox &qu
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
