[Solved] What’s the fastest, most efficient way to toggle > 10000 checkboxes with Javascript/jQuery?

by


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.

solved What’s the fastest, most efficient way to toggle > 10000 checkboxes with Javascript/jQuery?