Shift + 单击以选择一系列复选框

Posted 2023-03-05

【中文标题】Shift + 单击以选择一系列复选框

【英文标题】：Shift + Click to Select a Range of Checkboxes

【发布时间】：2013-08-19 08:26:27

【问题描述】：

我正在生成大表，每行都有一个复选框，类“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>

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

【参考方案1】：

用jquerynextUntil怎么样？

我实际上并没有对此进行测试，但这应该会给您基本的想法，并且它删除了 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();
;

【讨论】：

我的编程经验很少，也没有 javascript/jquery 的经验，所以即使是很小的语法错误也很难发现。我尝试按原样使用该代码，但选择一系列框的能力消失了。

在这种情况下，使用您当前的代码制作一个 jsfiddle，然后我可以修改它来演示。

【参考方案2】：

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

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

【讨论】：

这可能真的很愚蠢，但请耐心等待。我将该文本保存在我的桌面上作为“shift_click.js”。在我导入的 html 文档的头部：<script src="C:\Users\user\Desktop\shift_click.js"></script> 然后我添加了以下行来代替上面的代码，以 var lastClickedBox = 0 开头：$form.find('chcktbl').shiftSelectable(); 当这不起作用时，我尝试了 $('#form').find .依然没有。我在这里错过了一些非常基本的东西吗？

另外，你说我的代码运行良好。它完全符合我的要求，直到我尝试选择超过 10 个框。此时，它会选择前 10 个，然后弹出窗口。允许脚本继续运行选择下一个 10 并再次生成弹出窗口。它最终会选择整个范围，但前提是我继续通过弹出窗口允许它。

这是一个 jquery 插件，所以它只有在你使用 jQuery 时才能工作。最好获取本地副本，但是您可以尝试将其添加到页面的头部 当我说您的代码运行良好时我，我在页面上有 200 个复选框，并且正在选择其中的大块。可能是浏览器的事情。这个插件可能比你的代码更有效的原因是你使用循环，但是这个使用数组切片和批量选择

此网址不存在。你能更新你的答案吗