KNOCKOUTJS 复选框，然后单击父 TD

knockoutjs checkbox and click on parent td

本文关键字：TD 单击 然后 复选框 KNOCKOUTJS      更新时间：2023-09-26

我有一个有一行的表。该行有一个TD（其中包含一个复选框），在TD上我有一个单击功能。这样，当单击TD时，复选框将被选中/取消选中。

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

想要的情况是：

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

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

我们如何才能做到这一点？

示例代码

问题是，

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

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

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

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

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

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

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

单击该复选框将调用 TD 的单击处理程序代码：

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

这将删除检查。

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

<td data-bind="click:tdClick">
      <input type="checkbox" data-bind="checked: checkBox, click:tdClick" />
</td>
相关文章：