4

我正在生成大表，每一行都有一个复选框，类“chcktbl”。

在表头中，有一个全选复选框，类“chckHead”。

选择/取消选择所有功能工作正常，我在表格标题中显示的所选图表的数量也是如此。

启用 shift+click 功能以选择一系列复选框的功能也可以使用，但在其当前格式下，仅选择 10 个复选框，然后在弹出窗口中生成错误消息：

“停止运行此脚本？此页面上的脚本导致您的网络浏览器运行缓慢。如果继续运行，您的计算机可能会变得无响应。”

<script type=text/javascript>


        //select all button
        $('#chckHead').click(function() {

            if (this.checked === false) {
                $('.chcktbl:checked').attr('checked', false);
            }
            else {
                $('.chcktbl:not(:checked)').attr('checked', true);
            }
            countSelected();

        });

//count number of boxes checked        
function countSelected() {
            var numCharts = $('input.chcktbl:checked').length;
            $('#numCharts').html(numCharts);

        }


        //SHIFT+Click to select a range of checkboxes:

        // this variable stores the most recently clicked checkbox
    // it is used for shift-clicks
    var lastClickedBox = 0;

    // the checkbox functionality is default to the browser
    $('.chcktbl').click(function(event) {
        var clickedBox = $('.chcktbl').index(event.target);
        if(event.shiftKey) {
            setCheckboxes(lastClickedBox, clickedBox);
        };
        lastClickedBox = clickedBox;
                    countSelected();
    });


    // sets all the checkboxes between the specified indices to true

    function setCheckboxes(end, start) {
        if(start > end) {
            var temp = start;
            start = end;
            end = temp;
        };
        for(var i = start; i < end; i++) {  
        $('.chcktbl').eq(i).prop('checked', true);
        };
                    countSelected();
    };

    </script>

这是一键选择一系列项目的一个非常常见的功能，但我找不到有效的方法来做到这一点。如果有人知道解决此问题的更好方法，或者可以发现代码中的一些低效率，请告诉我。

4

2 回答 2

0

使用 jquery nextUntil怎么样？

我实际上并没有对此进行测试，但这应该会给您基本的想法，并且它删除了 for 循环。在使用 nextUntil/prevUntil 之前，我创建了与此类似的功能，并且从未得到无响应的页面。

function setCheckboxes(end, start) {
    if(start > end) {
        var temp = start;
        start = end;
        end = temp;
    };

    $('.chcktbl').eq(start).nextUntil(':eq('+(end+1)+')').add().prop('checked', true);
    countSelected();
};
于 2013-08-16T20:37:10.737 回答
0

我试过你的代码，它对我来说效果很好。你可能想试试这个 jquery 插件

https://gist.github.com/DelvarWorld/3784055

于 2013-08-16T20:39:10.097 回答