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

Question

I have a div with more than 10000 checkboxes in it.

For now, take it as a technical limitation that I have 10000 checkboxes. It can't and won't change. This is not a homework.

<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>

and this jQuery code that activates when specific buttons are pressed.

        $('.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();
        });

(Ignore the :visible part as the list could be filtered)

When the number of checkboxes is in the thousands the whole thing gets too slow, especially when ~10000 checkboxes need to be toggled.

I was wondering if there's a faster (not necessarily better) way to toggle all of them at the same time (mostly for select/unselect all, as inverse selection can be removed altogether)

Answer 1

Ok, I know how much you loved my 10000 checkboxes so since I recently moved to 50000 checkboxes I figured it would be fun to post an answer (maybe I'll get enough downvotes to keep me going till the ultimate target of 100000 checkboxes on a single page).

I updated the HTML since last time to this:

<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>

and this is the code for the buttons that can now manipulate 50000 checkboxes in 2-4 seconds:

    $('.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()
    });

The only thing that has changed is we removed the.change() and added code that replicates its functionality once all checkboxes have been manipulated.

This has resulted in being able to check/uncheck 50000 checkboxes in as little as 1-2 seconds and 3-4 seconds on average.