Javascript 当我单击淘汰表行中的复选框时，tr click事件将覆盖复选框状态更改

我有一个带有复选框的淘汰表（在这里的示例中，我将每行限制为一个复选框）。 单击复选框时，它应翻转状态（如您所期望的）。 但是，我在表行上还有一个click事件和select事件，这与复选框冲突

<table>
  <tbody data-bind="foreach: namespace.divResults.model">
    <tr data-bind="click: $root.selectItem, css: {selected: $root.isSelected($data)}">
      <td data-bind="text: Title"></td>
      <td data-bind="text: Surname"></td>
      <td data-bind="text: PostCode"></td>
      <td><input type="checkbox" data-bind="checked: Excluded, click: $root.toggleExcluded"></td>
      <td data-bind="text: Notes" style="display:none"></td>
    <tr>
  <tbody>
<table>
<div>
  <!-- ko with: $root.selectedItem -->
  <textarea data-bind="textInput:Notes"></textarea>
</div>

我尝试过使用clickBubble事件，但这会阻止表行上的click事件的操作，这在任何情况下都可以正常工作。

---

我发现，单击一行的复选框可以正确地更改其状态，但当该行单击时会被放回原位。

我使用了一个实际的复选框，不确定这是否是您的要求，无论如何，这是带有复选框的列

<td>
    <input type="checkbox" data-bind="checked: Excluded"/>
</td>

这里是一个工作示例，我在底部添加了一个输入，显示了排除的状态

---

我的错，那些复选框是我原始代码中的显式输入，我把它们错误地转换到了我的示例中！编辑以反映这一点。

<td>
    <input type="checkbox" data-bind="checked: Excluded"/>
</td>

self.selectItem = function (row) {
     self.selectedItem(row);
     return true;
};