Jquery 'prop' 使 chrome 在大量复选框上无响应

Jquery 'prop' makes chrome unresponsive on large number of check boxes

本文关键字：复选框 响应 chrome prop Jquery      更新时间：2023-09-26

>我有一个Web应用程序，其中有一个包含1000+复选框的 asp.net 复选框列表。我的页面上有 6 个这种类型的复选框列表。我在每个复选框列表的顶部放置了"全选"和"取消全选"两个按钮，只需单击一下即可选中和取消选中所有按钮。

这是我的代码

 $('#btnCheckAllName').click(function() {
             $('[id$=cblName] :checkbox').prop('checked', true);
        });

我正在使用jquery-1.9.1.js。这段代码在 Mozilla 33.1 中运行得很好，但是当我在 chrome 41.0 中运行这段代码以选中列表中的所有复选框时，它会挂起，一段时间后一条消息说要杀死页面。

但是当我使用每个循环来选中如下所示的所有复选框时。

   $('#btnCheckAllName').click(function (e) {
            $("#HeadContent1_cblName > tbody > tr").each(function () {
                $($(this).find("input[id^=HeadContent1_cblName_]")).prop('checked', true);
            });
        });

它工作正常。此外，如果我在 chrome 中启动调试器并编写 alert（），它会在 2-3 分钟后出现，这意味着当 chrome 挂起时。请谁能告诉我为什么第一个在火狐而不是铬中工作？

这是 html

    <table id="HeadContent1_cblName">
        <tbody>
            <tr>
                <td>
                    <input id="HeadContent1_cblName_0" type="checkbox" value="asdf" name="ctl00$HeadContent1$cblName$0">
                    <label for="HeadContent1_cblName_0">asdf</label>
                </td>
            </tr>

            <tr>
                <td>
                    <input id="HeadContent1_cblName_1" type="checkbox" value="asdf" name="ctl00$HeadContent1$cblName$1">
                    <label for="HeadContent1_cblName_1">asdf</label>
                </td>
            </tr>
        </tbody>
    </table>

我有一种感觉，问题不在于.prop()，而在于您的 DOM 选择。

你的第一个选择器使用的是非标准选择器，所以它是用JavaScript实现的。此外，您将[id$=cblName]和:checkbox应用于找到的每个元素，而不仅仅是input元素。

因此，第一个改进将是：

//  v--or whatever   v--only inputs
$('div[id$=cblName] input:checkbox').prop('checked', true);

但是要使用完全本机的选择器，请使用[type=checkbox]而不是:checkbox：

//  v--or whatever   v--only inputs
$('div[id$=cblName] input[type=checkbox]').prop('checked', true);
// ---------------------------^-- native selector for only checkboxes

这也应该会有所提升。

注意：

您没有提供 HTML 标记，但从第二个代码块猜测，cblName元素是 :checkbox 。这意味着第一个选择器是错误的。它应该是这个：

$('input[id$=cblName]:checkbox').prop('checked', true);

或更好：

$('input[id$=cblName][type=checkbox]').prop('checked', true);

请注意，我删除了:checkbox 之前的空格。你拥有它的方式，你正在寻找input的后代，这是没有意义的。

相关文章：