Question

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

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

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

问题是，如果我直接点击复选框，则没有任何反应。即。如果未选中该复选框，则保持未选中状态。如果我单击行中的任何其他位置，则复选框会更改状态。

我认为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'));
        }
});

Answer 2

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

Answer 3

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

Answer 4

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

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

4 个答案: