Dealing with large numbers of HTML checkboxes

问题

I am dealing with a dynamic form that can potentially provide the user with an unspecified number of checkboxes in an array (category[]).

This causes a few issues.

Issue #1: Hitting the maximum number of POST variables that the browser and/or server allows. This can be solved by using a bit of script and actually posting the array in a single comma separated value.

Issue #2: Browsers getting very slow and / or crashing. One user has over 5000 checkboxes representing categories, which causes Chrome to bug out, Firefox to go very slowly and I dare not try it in IE yet!

I would love some suggestions or ideas on how to solve the second problem!

Regards,

Joel

回答1:

I discovered that the cause of the lag / slowness was due to a jquery loop which was doing an each() on all inputs to determine if any fields have been changed. Obviously jQuery doesn't like looping through that many elements.

I stopped the loop from hitting the checkbox list and it's no longer slow.

It would be nice to be able to grab an array of values of the checkbox list in one hit rather than having to loop through them all!

回答2:

I don't think it's a good strategy to render 5.000 checkboxes at once, as you say there's a huge performance issue, not to talk about usability (who's going to interact with such a page?).

IMHO you can either load/unload checkboxes using ajax (and store the selected options in a temporary js object) or handle the logic server-side with postbacks...

回答3:

UPDATED ANSWER

You can also try making a List box instead of a checkbox list. Here is the code and again it has no performance issues.

<?php
    if( isset($_POST['chk']) ):
        echo '<pre>';
        var_dump( $_POST['chk'] );
        echo '</pre>';
        die();
    endif;
?>
<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <form action="test.php" method="post">
        <select name="chk[]" multiple style="height: 400px;">
        <?php
            for( $i = 0 ; $i < 10000 ; $i++ ):

                echo '<option value="' . $i . '">' . $i . '</option>';

            endfor;
        ?>
        </select>
        <input type="submit" />
    </form>
</body>
</html>

ORIGINAL ANSWER

I tried to create a page to understand the browser behavior and it works perfectly fine without any performance issue for 10,000 checkboxes.

Successfully tested on Firefox 10 and Chrome 17.

This is the code:

<?php
    if( isset($_POST['chk']) ):
        echo '<pre>';
        print_r( $_POST['chk'] ); //simply print the array
        echo '</pre>';
        die();
    endif;
?>
<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <form action="test.php" method="post">
        <?php
            for( $i = 0 ; $i < 10000 ; $i++ ): //adjust this number to whatever number of checkboxes you want

                echo '<input type="checkbox" name="chk[]" checked /> Checkbox ' . $i . '<br />';

            endfor;
        ?>
        <input type="submit" />
    </form>
</body>
</html>

来源：https://stackoverflow.com/questions/9496576/dealing-with-large-numbers-of-html-checkboxes

标签

html

browser

checkbox