直接单击复选框时不会更改答案

【问题标题】：Checkbox does not change when clicked directly on it直接单击复选框时不会更改
【发布时间】：2010-05-21 23:25:16
【问题描述】：

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

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

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

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

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

当用户点击一行时，我怎样才能让一个复选框被切换，如果他们直接点击复选框，我该如何切换？

【问题讨论】：

标签： jquery checkbox

【解决方案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'));
        }
});

【讨论】：

很好的解决方案，可能比我的更好，但您应该在函数的开头添加这一行。 ( e = e || event; ) 这将在浏览器中正确处理事件。

【解决方案2】：

Tt 是因为复选框在 tbody tr 中。如果您要单步执行代码，您会注意到它已被选中，但随后您的 click 函数未选中。更改您的点击功能以排除包含复选框的 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')); 
    }
});

【讨论】：

如果 td 包含除复选框之外的任何其他内容，例如标签，当您单击标签时，不会发生任何事情。示例：jsfiddle.net/crX7L。我发布了另一个建议，而是查看事件并据此决定要做什么

【解决方案3】：

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

【讨论】：

【解决方案4】：

如果问题是事件实际上被触发了两次（这似乎是一个合理的假设），那么您应该尝试使用event.preventDefault() 和event.stopPropagation() 事件方法。他们应该阻止事件到达复选框本身。

【讨论】：

好主意，但恕我直言，阻止浏览器实现其默认行为应该是最后的手段。在重构代码或在未来的实现中阻止事件传播可能会导致其他问题。