复选框上的javascript单击事件导致未选中复选框

Question

您好，提前感谢您给我的任何建议。

我有一个页面，它有一个 gridview，在 HeaderTemplate 中有一个复选框，在下面的列中有复选框。不在 HeaderTemplate 中的所有复选框都有一个“selectCB”类。我在 document.ready 中创建了以下单击事件，以便标题中的复选框可以用于全选/取消全选功能。当所有复选框都被选中时，Check All 复选框本身每次都被取消选中，因此永远无法完成取消选中所有的相反过程。

我查看了一些关于 SO 的帖子，here 和 here 是一些示例，但到目前为止没有任何效果。该页面目前使用的是 jquery 1.6.1，因此在将来进行升级之前，我仅限于这些选项。

这里是点击功能：

    $('#cbAll').click(function() {
    event.preventDefault();
    event.stopPropagation();
    if ($('#cbAll').is(':checked')) {
        $('#gvCheckbox').find('td:first-child input[type="checkbox"]').each(function() {
            var cb = $(this);
            cb.attr('checked', true);
        });
        $(this).attr('checked', true);
    } else {
        $('#gvCheckbox').find('td:first-child input[type="checkbox"]').each(function() {
            var cb = $(this);
            cb.attr('checked', false);
        });
        $(this).attr('checked', false);
    }
    return false;
});

这是来自gridview的标题和列：

<asp:TemplateField>
    <HeaderStyle HorizontalAlign="Left"></HeaderStyle>
    <HeaderTemplate>
        <input type="checkbox" id="cbAll" clientidmode="Static" />
    </HeaderTemplate>
    <ItemTemplate>
        <input type="checkbox" id="cbOne" clientidmode="Static" CssClass="selectCB" />
    </ItemTemplate>
</asp:TemplateField>

当我使用 Chrome 的调试器浏览这段代码时，我看不到任何错误，而且直到它完成处理代码后复选框才会被取消选中。我尝试过使用 .live ，但结果相同。我还能尝试什么？或者有人可以帮助弄清楚如何更有效地调试这个问题以找到问题？

Answer 1

尝试change而不是click，不要更改处理程序中的checked属性，使用prop而不是attr，并为事件对象添加一个参数。我还大大简化了函数。

$('#cbAll').change(function(e) {
    e.stopPropagation();

    $('#gvCheckbox')
        .find('td:first-child input[type="checkbox"]')
        .prop('checked', this.checked);
});

Answer 2

为什么需要event.preventDefault() 和return false;？

[event.preventDefault()]：如果调用该方法，则不会触发事件的默认动作。

[return false;]：调用时执行三个任务：

1. event.preventDefault();
2. event.stopPropagation();
3. 停止回调执行并在调用时立即返回。

如果您只是评论这两种方法，您的代码就可以工作。 （PS：使用.prop() 而不是.attr()）：

$(document).on('click','#cbAll',function(event) {
    //event.preventDefault();
    event.stopPropagation();
    if ($('#cbAll').is(':checked')) {
        $('#gvCheckbox').find('td:first-child input[type="checkbox"]').each(function() {
            var cb = $(this);
            cb.prop('checked', true);
        });
        $(this).prop('checked', true);
    } else {
        $('#gvCheckbox').find('td:first-child input[type="checkbox"]').each(function() {
            var cb = $(this);
            cb.prop('checked', false);
        });
        $(this).prop('checked', false);
    }
    //return false;
});

演示：

http://jsfiddle.net/cbQt4/1/