jquery - 直接单击复选框时，复选框不会更改

Question

我有一个数据表，每行有一个复选框供用户选择该项目。

我使用以下 jQuery 代码来允许用户通过单击行中的任意位置来选择项目:

$("tbody tr").click(function() {
    var checkbox = $(this).find(':checkbox');
    checkbox.attr('checked', !checkbox.attr('checked'));
});

问题是如果我直接点击复选框，什么也不会发生。 IE。如果未选中该复选框，则它保持未选中状态。如果我单击该行中的任何其他位置，该复选框的状态就会更改。

我认为 jQuery 代码导致该操作执行两次。如果我单击该复选框，该复选框将会更改，但随后将执行用于单击该行的 jQuery 代码，并且该复选框将更改回来。不确定这是否真的发生，但这是我的猜测。

当用户单击一行时如何切换复选框，如果直接单击复选框则如何切换？

Answer 1

通过检查事件信息来检查哪个项目被点击。然后，如果它是一个复选框，则不要运行代码。否则，切换选中的属性

$("tbody tr").click(function(e) {
        e = e || event;
        var isCheckbox = $(e.target).is(":checkbox");
        if (!isCheckbox) {
            var checkbox = $(this).find(':checkbox');
            checkbox.attr('checked', !checkbox.attr('checked'));
        }
});