用 Javascript/jQuery 切换 > 10000 个复选框的最快、最有效的方法是什么？答案

【问题标题】：What's the fastest, most efficient way to toggle > 10000 checkboxes with Javascript/jQuery?用 Javascript/jQuery 切换 > 10000 个复选框的最快、最有效的方法是什么？
【发布时间】：2020-03-25 22:31:40
【问题描述】：

我有一个div，其中包含超过 10000 个复选框。

现在，将我有 10000 个复选框作为技术限制。它不能也不会改变。这不是家庭作业。

<div class="well well-sm" style="min-height: 100px; max-height: 360px; overflow: auto; background-color: #f7f7f7;">

        <label>
            <input type="checkbox" class="checkbox-item" name="some_name" value="28" checked="checked"> Item 1
        </label><br />

<!-- another 10000 of these -->
</div>

以及当按下特定按钮时激活的 jQuery 代码。

        $('.select-all').click(function () {
            $(this).parent().find(':checkbox:visible').prop('checked', true).change();
        });

        $('.unselect-all').click(function () {
            $(this).parent().find(':checkbox:visible').prop('checked', false).change();
        });

        $('.select-inverse').click(function () {
            $(this).parent().find(':checkbox:visible').click();
        });

（忽略:visible部分，因为列表可以被过滤）

当复选框的数量达到数千个时，整个事情变得太慢了，尤其是当需要切换大约 10000 个复选框时。

我想知道是否有更快（不一定更好）的方法来同时切换所有它们（主要用于全选/取消全选，因为可以完全删除反向选择）

【问题讨论】：

@nickpapoutsis 因为如果您在单个页面上需要 10000 个复选框，您可能会遇到应该通过其他方式解决的问题。也许有更好的方法来实现您的需求。
@nickpapoutsis 如果它是某种批量列表，并且您希望能够对其进行批量操作，最好将结果按每页 50-100 分页，并有一个单独的单行批处理操作，一个选择框用于“全部”或选中，另一个选择操作。
@nickpapoutsis 我明白了，但我还能问“为什么”吗？这将提供有价值的背景。在帮助同事时，这也是我在现实生活中的第一个问题。这听起来很错误，以至于我认为上下文至关重要。
@nickpapoutsis 好吧，分页尤其适用于这种情况。更不用说检查所有这些，即使是 DOM 渲染也需要相当长的时间。我已经处理了数百万条带有分页、可过滤且仍可批量操作的记录。通过您的最新添加，如果您在页面上提供过滤器，您应该知道过滤器是什么。您可以只使用“已过滤”选项，而不是“全部”或“已选择”，这会将您想要的任何内容应用于当前结果，因为如果您可以检索它们，您也可以查询它们以进行更新。
@nickpapoutsis - 你仍然可以用类优化你的选择器，我觉得你隐藏的复选框可能属于一个元素，该元素有一个详细说明它被隐藏的类。第一步是尝试优化您的选择器。第二步是说明为什么您在所有这些复选框上手动调用change - 您必须设置侦听器吗？我敢打赌，您可能可以通过更好的授权来解决这个问题。

标签： javascript jquery html dom optimization

【解决方案1】：

好的，我知道你有多喜欢我的 10000 个复选框，所以自从我最近移至 50000 个复选框后，我认为发布答案会很有趣（也许我会得到足够多的反对票，让我坚持到最终目标 100000单页上的复选框）。

自上次以来我将 HTML 更新为：

<div class="well  well-sm  top" data-textarea-target="name-of-target">
    <div class="checkbox-item">
        <input type="checkbox" name="some_name" id="28" value="28" checked="checked">
        <label for="28">
            <span class="well-text-style-1">Item 1</span>
            <span class="well-text-style-2">subtitle</span>
        </label>
    </div>
<!-- another 50000 of these -->
</div>

这是现在可以在 2-4 秒内操作 50000 个复选框的按钮的代码：


    $('.select-all').click(function () {
        // we check all visible checkboxes
        $(this).parent().find(':checkbox:visible').prop('checked', true);
        // other code here that calls functions to handle the removal of .change()
    });

    $('.unselect-all').click(function () {
        // we uncheck all visible checkboxes
        $(this).parent().find(':checkbox:visible').prop('checked', false);
        // other code here that calls functions to handle the removal of .change()
    });


    $('.select-inverse').click(function () {
        // we uncheck the visible, checked ones and check the visible, unchecked ones
        $(this).parent().find(':checkbox:visible').prop( "checked", function( i, val ) {
            return !val;
        });
        // other code here that calls functions to handle the removal of .click()
    });

唯一改变的是我们删除了 .change() 并添加了在所有复选框都被操作后复制其功能的代码。

这导致能够在短短 1-2 秒和平均 3-4 秒内选中/取消选中 50000 个复选框。

【讨论】：