Question

我被要求标记为选中表格行上的复选框单击，下面的脚本正在运行，但现在当我直接单击复选框时，它不起作用，仅当我单击表格行时才有效。

我有这个HTML：

<tr class="linha_tela" id="4">
   <td>Profile</td>
   <td>Clientes</td>
   <td>
     <input type="checkbox" checked="checked" id="controller_4" name="controllers[]" value="4" />
  </td>
</tr>

这是我的剧本：

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

由于

Answer 1

正在发生的事情是，当您单击它时，复选框将切换，然后触发事件处理程序，使其变为未选中状态。这基本上是瞬间发生的，这就是为什么它似乎根本不起作用。

试试这个：

$('.linha_tela').click(function(event) {
    if (!$(event.target).is(':checkbox')) {
        var checkbox = $(this).find(':checkbox');
        checkbox.attr('checked', !checkbox.attr('checked'));
    }
});

修改：这是jsfiddle demo的工作原理。

Answer 2

这种情况正在发生，因为复选框位于表格行中，因此当您点击它时，它会改变它的状态（因为这是复选框的作用）。

然后点击冒泡到你的tr，然后运行脚本，这会改变它的状态。

你需要检查事件目标，如果它不是输入，那么就做你的事情，如果是，那就不要了。

这是修改后的脚本：

$('.linha_tela').click(function(event) {

    if (event.target.nodeName != 'INPUT') {
        var checkbox = $(this).find(':checkbox');
        checkbox.attr('checked', !checkbox.attr('checked'));
    }
});

和一个jsfiddle的链接来尝试： http://jsfiddle.net/yDEyC/

Answer 3

$(":checkbox").click(function(event) {
  event.stopPropagation();
});

这应该有用。

Answer 4

这是一个演示代码场景的jsfiddle：

http://jsfiddle.net/sAfTT/

您遇到的问题是HTML中的事件常见问题。当事件被触发时，它们会从最近到最远的顺序触发它们可以应用的每个元素。这称为冒泡（也可以捕获反向工作）。 http://www.quirksmode.org/js/events_order.html

所以，实际上，当你点击复选框时，你也点击了这一行，所以处理程序调用看起来像这样。（假设该框未选中以开始。反向检查/取消选中）< / p>

点击复选框：选中复选框
我可以泡起来吗？是
点击了一行。有事件处理程序吗？是
火灾事件处理程序（你的）。这决定了是否选中了复选框。它是。
由于选中此复选框，请取消选中该复选框。
我可以泡起来吗？是
表单击。有事件处理程序吗？无
单击文档。有事件处理程序吗？否。

您可以直接将事件处理程序附加到复选框以防止冒泡

$(':checkbox').click(function(e){
    e.preventDefault();
    e.stopPropagation();
})

编辑：我永远不会让防止默认在jsfiddle中正常工作，但其他答案提供的概念也可以很好地工作。

使用脚本之前复选框无法正常工作

4 个答案: