处理大量的HTML复选框

时间:2012-02-29 09:32:42

标签: html browser checkbox

我正在处理一个动态表单,它可能会为用户提供一个数组中未指定数量的复选框(category [])。

这会导致一些问题。

问题#1 :达到浏览器和/或服务器允许的最大POST变量数。这可以通过使用一些脚本并实际将数组发布在一个逗号分隔值中来解决。

问题#2 :浏览器变得非常缓慢和/或崩溃。一个用户拥有超过5000个代表类别的复选框,导致Chrome出错,Firefox速度非常慢,我不敢在IE中尝试!

我想对如何解决第二个问题提出一些建议或想法!

此致

乔尔

3 个答案:

答案 0 :(得分:2)

我发现延迟/缓慢的原因是由于jquery循环在所有输入上执行each()以确定是否有任何字段已更改。显然jQuery不喜欢循环遍历那么多元素。

我阻止循环点击复选框列表,它不再慢。

能够在一次点击中获取复选框列表的值数组而不是必须遍历它们会很好!

答案 1 :(得分:0)

我不认为同时渲染5.000复选框是一个很好的策略,正如你所说,存在巨大的性能问题,而不是谈论可用性(谁会与这样的页面进行交互?)。

恕我直言,您可以使用ajax加载/卸载复选框(并将所选选项存储在临时js对象中)或使用回发处理逻辑服务器端...

答案 2 :(得分:0)

更新的答案

您也可以尝试制作列表框而不是复选框列表。这是代码,并且它没有性能问题。

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

原始答案

我尝试创建一个页面来理解浏览器的行为,并且它可以完美地运行,而不会出现10,000个复选框的任何性能问题。

在Firefox 10和Chrome 17上成功测试。

这是代码:

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