javascript - knockoutjs 复选框并单击父 td

Question

我有一张桌子，有一排。该行有一个 TD（其中有一个复选框），在 TD 上我有一个点击功能。这样当点击 TD 时，复选框将被选中/取消选中。

当我点击 TD 时它工作正常，但是当点击复选框时，复选框的（视觉）值没有改变（它没有被选中/取消选中）

想要的情况是：

1. 当我单击复选框时，复选框的（视觉）值会发生变化，我可以调用一个函数。（例如进行 AJAX 调用）

2. 当我点击 TD 时，复选框的（视觉）值会发生变化，我可以调用一个函数。（例如进行 AJAX 调用）

我们怎样才能做到这一点？

示例代码

Answer 1

问题是TD当您单击 时，单击处理程序也会触发checkbox，这意味着的默认单击处理程序和您的自定义单击处理程序checkbox都会更改（它们相互抵消）。解决方案是防止对 的点击冒泡到. 您可以使用此绑定在 Knockout 中执行此操作：.checkboxTDcheckboxTDclick:function(){return true}, clickBubble:false

这是在行动：http: //jsfiddle.net/mbest/Eatdh/12/

但是，我确实认为使用 alabel是一种更好的方法（请参阅我的其他答案）。

Answer 2

为避免点击事件问题，请使用该label元素使更大的区域可点击。在这里，我将标签设置为块元素，因此它占据了整个元素td：

<td>
    <label style="display: block">
        <input type="checkbox" data-bind="checked: checkBox" />
    </label>
</td>

见http://jsfiddle.net/mbest/LsxSh/

Answer 3

Td 事件似乎覆盖了输入的检查点击事件

Answer 4

单击复选框会调用 td 的单击处理程序代码：

self.checkBox(!self.checkBox());

这将删除检查。

Answer 5

这不是很干，但它快速而实用：小提琴

<td data-bind="click:tdClick">
      <input type="checkbox" data-bind="checked: checkBox, click:tdClick" />
</td>