处理大量 HTML 复选框答案

【问题标题】：Dealing with large numbers of HTML checkboxes处理大量 HTML 复选框
【发布时间】：2012-02-29 09:32:41
【问题描述】：

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

这会导致一些问题。

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

问题 #2：浏览器变得非常缓慢和/或崩溃。一位用户有超过 5000 个代表类别的复选框，这导致 Chrome 出错，Firefox 运行缓慢，我还不敢在 IE 中尝试！

我很想得到一些关于如何解决第二个问题的建议或想法！

问候，

乔尔

【问题讨论】：

看到一个有 5000 个复选框的页面，怎么会有人不会失去理智？
嗯...分页可能吗？您使用的是什么服务器端语言？你如何获取数据？
格雷厄姆克拉克：告诉我吧！但它完全是用户生成的，他们有一个很大的目录，里面有很多类别，他们想为很多类别分配一些东西。 @ShadowWizard 基于 AJAX 的分页可能是我的解决方案，但除非我在更改页面时删除元素，否则可能会出现相同的问题，使用 PHP 和 MYSQL，显然分页需要更多的服务器请求和查询。
为什么会有更多请求？还要更改 PHP 代码，这样它就不会一次发送整个数据，而是只发送给定页面的数据。不会很简单，但是写对了，就好了。

标签： html browser checkbox

【解决方案1】：

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

我停止了循环点击复选框列表，它不再慢了。

如果能够一次性获取复选框列表的一组值，而不是遍历所有值，那就太好了！

【讨论】：

您能详细说明您的解决方案吗？什么是 jQuery 循环，你是如何阻止它的？
循环只是一些自定义 JS，用于查看表单并确定用户是否对任何字段进行了任何更改。它遍历表单中的每个字段，并且由于要查看和检查值的复选框太多，它很生气。我只是从“表单更改”检查中省略了这组复选框。

【解决方案2】：

我认为一次渲染 5.000 个复选框不是一个好策略，正如你所说的那样存在巨大的性能问题，更不用说可用性（谁将与这样的页面交互？）。

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

【讨论】：

好建议，将数据保存在 javascript 对象中至少意味着不需要 AJAX 请求，从而减少对服务器命中的需求:)
对此的一种变体可能是在多个字段集中呈现复选框，并在表单的提交事件触发时使用 ajax 单独提交每个字段集

【解决方案3】：

更新答案

您也可以尝试制作一个列表框而不是复选框列表。这是代码，它再次没有性能问题。

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

【讨论】：

嗯，很有趣。我知道表单中还有很多其他字段，包括 WYSIWYG 编辑器和一些可能对性能没有帮助的 JS 库。
@Joel 如果可以的话，请检查我更新的答案是否有不同的方法。
是的，虽然它们很可怕！ :) 我相信我会尝试处理 Javascript 对象中的数据并即时删除/添加复选框。尽管大规模的 DOM 操作并不总是那么出色！
这样您将依赖客户端的浏览器性能，这不是一个好主意。如此庞大的 DOM 会产生问题。
您不认为如果我通过动态删除它们来维护一个包含 100 个复选框（不超过可见）的列表，它会保持较小吗？