Question

我有一个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个复选框时。

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

Answer 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个复选框。

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

1 个答案: