javascript - Chrome 在使用 javascript 检查许多复选框时挂起，而 firefox 会立即挂起

Question

我正在使用一个 asp:Repeater 服务器端控件，它包含一个表，因为它是可重复的项目。表中的一个 td 标签包含一个复选框。在中继器的标题中，我有一个带有 id="selectAllCheck"的复选框。

我有以下javascript代码

    var checkBox = document.getElementById('selectAllCheck');

    function changeAll() {
        if (checkBox.checked == 1) {
            $('input:checkbox').attr('checked', "checked");
        }
        else {
            $('input:checkbox').attr('checked', "");
        }
    }

    checkBox.onchange = changeAll;

这在 firefox 中工作得很好，必要时立即选中或取消选中所有复选框。但是，在 chrome 中大约需要 10 秒。顺便说一句，我在页面上确实有大约 250 个复选框，但即使把这个数字减少到只有 15 个，我也可以看到它仍然不是即时的，但速度更快。

如果有人以前遇到过这个问题，看过任何与此问题相关的文章，或者知道如何解决这个问题，我将不胜感激。

编辑:发布页面

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentMain" Runat="Server">
<form id="webForm" runat="server">
    <asp:Label ID="sourceLabel" runat="server" AssociatedControlID="sourceList" Text="Source"></asp:Label>
    <asp:DropDownList ID="sourceList" runat="server" />&nbsp;
    <asp:Button ID="showButton" runat="server" Text="View" />
    <asp:Repeater ID="Repeater_DIBS" runat="server">
        <HeaderTemplate>
            <table>
            <tr><th><input type="checkbox" id="selectAllCheck" /> (un)check All</th>    <th>SourceID</th><th>FieldID</th><th>Source Indicator</th><th>Date Data Updated</th>   <th>Message</th></tr>
        </HeaderTemplate>
        <ItemTemplate>
            <tr>
                <td style='width:1%;white-space:nowrap;'><input type='checkbox' class='checkBoxes' /></td>
                <td style='width:1%;white-space:nowrap;'><%# Eval("SourceID") %></td>
                <td style='width:1%;white-space:nowrap;'><%# Eval("FieldID") %></td>
                <td class='indicator' style='width:1%;white-space:nowrap;'><%# Eval("SourceIndicator") %></td>
                <td style='width:1%;white-space:nowrap;'><%# Eval("DateDataUpdated") %></td>
                <td style='width:1%;white-space:nowrap;' class='status'></td>
            </tr>
        </ItemTemplate>

        <FooterTemplate>
            </table>
        </FooterTemplate>
    </asp:Repeater>
</form>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="ContentJS" Runat="Server">
    <script type="text/javascript">
    $("#selectAllCheck").change(function () {
        if (this.checked) {
            $("input:checkbox.checkBoxes").attr("checked", "checked");
        }
        else {
            $("input:checkbox.checkBoxes").removeAttr("checked");
        }
    });

</script>
</asp:Content>

Answer 1

我认为这是 Chrome 中的错误。页面上的复选框越多，过程就越慢。当你有 500 左右时，速度就可以了。问题是，当您超过 1000 时，检查所有框的过程会呈指数增长。在IE9和FF4中，这个过程无关紧要。即使您不使用 jQuery 并尝试直接使用 js，您最终也会发现 Chrome 在页面上使用的复选框越多越慢。

如果可能，请尝试限制复选框的数量。