JS 勾选框，判断按shift多选时，性能问题？？？

JS 勾选框，判断按shift多选时，性能问题？？？
页面有个列是勾选框，当我按下shift多选时，要取值，通过for循环循环所有的数据，判断如果checked是true，就取现在问题来了，一但页面数据过多，但勾选时，一循环就慢了，请问这个问题该怎么解决？？？谢谢！！！

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

1. 勾选checkbox, 并不需要按什么shift键吧
2. 慢，　可能是因为你没有指定范围，　如果搜索的范围是整个页面，　而且页面内容很多，　当然会慢下耿。　你指定范围不就得了。<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
    function deleteMultiObjs(){
        //只在table1这个范围中选择checkbox, 速度很快的。
        var chks = $("#table1 :checkbox:checked");
        if(chks.length==0){
            alert("没有选中任何记录");
            return;
        }
        if(!confirm("您确认要删除这些记录吗?")){
            return;
        }
        //这里只作页面上的删除，如果要关联到后台请另写代码。
        chks.parents("tr").remove();
    }
</script>
</head>
<body>
<input type="button" value="删除" onclick="deleteMultiObjs()" />
<table id="table1" >
    <tr><td><input type="checkbox" value="id001" /></td><td>广州</td></tr>
    <tr><td><input type="checkbox" value="id002" /></td><td>东莞</td></tr>
    <tr><td><input type="checkbox" value="id003" /></td><td>深圳</td></tr>
</table>
</body>
</html>
单独选择是不用按shift，但你要一下选多条时就要按shift键啦
绑好事件后，不需要再for循环呀，数据多也不会有明显的慢。
噢我想问下，var chks = $("#table1 :checkbox:checked"); 取得是checkbox吧？？？
那我如何取选中的这行其他列的数据呢？？？
没接触过jquery，惭愧！！！
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
    function deleteMultiObjs(){
        var chks = $("#table1 :checkbox:checked");
        if(chks.length==0){
            alert("没有选中任何记录");
            return;
        }
//        if(!confirm("您确认要删除这些记录吗?")){
//            return;
//        }
        //这里只作页面上的删除，如果要关联到后台请另写代码。
        //chks.parents("tr").remove();

        //1. 得到所有的相关id. (其实真正应用，绝大部分是取checkbox的id就够了的。)
        var idArr=[];
        chks.each(function(){
            idArr.push($(this).val());
        });

        //2. 得到所有的地名
        var addressArr=[];
        //遍历所有选中checkbox的父级元素tr
        chks.parents("tr").each(function(){
            //tr的第2个子元素的文本
            var addr = $(this).children(":eq(1)").text();
            addressArr.push(addr);
        });

        //所有checkbox选中行的地名
        $("#divResult").empty();
        for(var i=addressArr.length-1;i>=0;i--){
            $("#divResult").append(addressArr[i]+"<br/>");
        }
    }
</script>
</head>
<body>
<input type="button" value="测试" onclick="deleteMultiObjs()" />
<table id="table1" >
    <tr><td><input type="checkbox" value="id001" /></td><td>广州</td></tr>
    <tr><td><input type="checkbox" value="id002" /></td><td>东莞</td></tr>
    <tr><td><input type="checkbox" value="id003" /></td><td>深圳</td></tr>
</table>
<div id="divResult" ></div>
</body>
</html>
CSDN的保存有问题：$("#divResult").append(addressArr[i]+"");
改成:
$("#divResult").append(addressArr[i]+"<br/>");
//1. 得到所有的相关id. (其实真正应用，绝大部分是取checkbox的id就够了的。)         var idArr=[];         chks.each(function(){             idArr.push($(this).val());         });
这种是一个页面有多个checkbox的吧？？？我的是有一个表单，有一列是勾选框，请问怎么取勾选的那行行号呢？？？
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
    function chkAll(obj){
        $("#table1 tbody :checkbox").prop("checked",$(obj).is(":checked"));
    }    function test(){
        var chks = $("#table1 tbody :checkbox:checked");
        if(chks.length==0){
            alert("没有选中任何记录");
            return;
        }

        chks.parents("tr").each(function(){
            var idx = $(this).index();
            var address = $(this).find("td:eq(1)").text();
            alert("选中的行号："+idx+", 地名："+address);
        });
    }
</script>
</head>
<body><input type="button" value="测试" onclick="test()" />
<table id="table1" cellpadding="1" cellspacing="1" border="1"  >
    <thead>
        <tr><td><input type="checkbox" onclick="chkAll(this)" /></td><td>地名</td><td>总产值(亿)</td></tr>
    </thead>
    <tbody>
        <tr><td><input type="checkbox" value="id001" /></td><td>广州</td><td>500</td></tr>
        <tr><td><input type="checkbox" value="id002" /></td><td>东莞</td><td>300</td></tr>
        <tr><td><input type="checkbox" value="id003" /></td><td>深圳</td><td>400</td></tr>
    </tbody>
</table></body>
</html>
回了jquery, 但觉得对你来说有难度了。虽然jquery优雅，但也不是一时半会学得精的。
再给你一段纯 js 写的吧。
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
    function chkAll(obj){
        var chks = document.getElementById("tbody1").getElementsByTagName("input");
        for(var i=0;i<chks.length;i++){
            chks[i].checked = obj.checked;
        }
    }    function test(){
        var chks = document.getElementById("tbody1").getElementsByTagName("input");

        var arr = [];
        for(var i=0;i<chks.length;i++){
            if(!chks[i].checked){
                continue;
            }
            var obj = {};
            obj.rowIndex = i;
            obj.address = chks[i].parentNode.parentNode.childNodes[1].innerHTML;
            arr.push(obj);
        }

        for(var i=0;i<arr.length;i++){
            alert("选中行号："+arr[i].rowIndex+", 地址："+arr[i].address);
        }
    }
</script>
</head>
<body><input type="button" value="测试" onclick="test()" />
<table id="table1" cellpadding="1" cellspacing="1" border="1"  >
    <thead>
        <tr><td><input type="checkbox" onclick="chkAll(this)" /></td><td>地名</td><td>总产值(亿)</td></tr>
    </thead>
    <tbody id="tbody1" >
        <tr><td><input type="checkbox" value="id001" /></td><td>广州</td><td>500</td></tr>
        <tr><td><input type="checkbox" value="id002" /></td><td>东莞</td><td>300</td></tr>
        <tr><td><input type="checkbox" value="id003" /></td><td>深圳</td><td>400</td></tr>
    </tbody>
</table></body>
</html>
首先有几点楼主需要考虑，就是你each的时候不要循环所有的，最好的循环指定的并且选中的checkbox
例如
$("input:[name='KeyAttribute']:checked").each(function(){
这样来做相对来说循环的元素和次数要少点
});
第一：这种需求还是可以理解的，比如我有100个选择，选择10后再按shift键后点60，希望选中的是10至60之间的数，跟选择文件夹原理一样。
第二：实现关键是判断shift有没有按下。
前面http://bbs.csdn.net/topics/390215967我们有讨论过类似的问题，你试着修改一下。不行再找我们。