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

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

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

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

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

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

---

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

您正在捕捉该行上的单击事件。如果复选框在TR内，则会触发事件，并且您正在反转“checked”属性。一种解决方案是将事件放置在TR中的每个TD上，但包含复选框的TD除外。

Tt是因为复选框位于tbody TR中。如果要单步执行代码，您会注意到它已被选中，但随后被单击功能取消选中。更改单击功能以排除包含复选框的td

$("tbody tr td").click(function() { 
    if ($("input:checkbox", $(this)).length) {
       //td contains check box  do nothing
    } else {
      var checkbox = $(this).find(':checkbox'); 
      checkbox.attr('checked', !checkbox.attr('checked')); 
    }
}); 

---

如果问题是事件实际上被触发了两次（这似乎是一个合理的假设），那么您应该尝试使用

event.preventDefault（）

和

event.stopPropagation（）

事件方法。他们应该阻止事件到达复选框本身。

通过检查事件信息来检查正在单击的项目。如果是复选框，则不要运行代码。否则，切换选中的属性

$("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'));
        }
});

---

好主意，但是阻止浏览器实现其默认行为应该是最后的手段。在重构代码或在将来的实现中防止事件传播可能会导致其他问题。这是一个很好的解决方案，可能比我的好，但您应该在函数的开头添加这一行。（e=e | | event；）这将在浏览器中正确处理事件。如果td包含除复选框以外的任何内容，例如标签，当您单击标签时，将不会发生任何事情。示例：。我发布了另一个建议，该建议关注该活动，并据此决定该做什么