0

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

我有这个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'));
    });

谢谢

4

4 回答 4

3

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

尝试这个：

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

编辑：这是它工作的jsfiddle 演示。

于 2012-04-11T19:35:53.203 回答
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/

于 2012-04-11T19:36:24.443 回答
1 
$(":checkbox").click(function(event) {
  event.stopPropagation();
});

这应该有效。

于 2012-04-11T19:39:01.893 回答
1

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

http://jsfiddle.net/sAfTT/

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

因此，实际上，当您单击复选框时，您也在单击该行，因此处理程序调用看起来像这样。（假设该框未选中开始。反向检查/取消选中适用）

  1. 单击的复选框：选中该框
  2. 我可以冒泡吗？是的
  3. 行点击。有事件处理程序吗？是的
  4. 火灾事件处理程序（您的）。这决定了复选框是否被选中。这是。
  5. 因为该框已选中，所以取消选中它。
  6. 我可以冒泡吗？是的
  7. 表单击。有事件处理程序吗？不
  8. 单击的文档。有事件处理程序吗？不。

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

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

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

于 2012-04-11T19:44:31.427 回答