Question

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

单击TD时工作正常，但单击复选框时复选框的（可视）值不会改变（不会选中/取消选中）

想要的情况是：

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

我们如何实现这一目标？

Answer 1

问题是TD的点击处理程序也会在您点击checkbox时触发，这意味着checkbox会被{{1}的默认点击处理程序更改和checkbox的自定义点击处理程序（它们相互抵消）。解决方案是防止点击TD冒泡到checkbox。您可以使用此绑定在Knockout中执行此操作：TD。

这里有效：http://jsfiddle.net/mbest/Eatdh/12/

但我确实认为使用click:function(){return true}, clickBubble:false是一种更好的方法（请参阅我的其他答案）。

Answer 2

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

Answer 3

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

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

请参阅http://jsfiddle.net/mbest/LsxSh/

Answer 4

单击复选框可调用td：

的单击处理程序代码

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

这将删除支票。

Answer 5

这不是很干，但它快速而实用：fiddle

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

knockoutjs复选框，然后单击父td

5 个答案: