如何在tbody上用hyperscript实现点击表格行切换该行复选框状态

安全阿岳

2026-7-6

解决Hyperscript绑定tbody实现行点击切换对应复选框的问题

你之前的问题出在没有限定复选框的查找范围，点击时会选中tbody下所有复选框。正确的做法是利用事件委托，先定位点击触发的行，再在该行内查找目标复选框。

直接上可用代码：

<table>
  <tbody _="on click from tr
            set row to event.target.closest('tr')
            set checkbox to row.find('input[type=\"checkbox\"]')
            if checkbox exists
              toggle checkbox.checked">
    <tr>
      <td><input type="checkbox"></td>
      <td>第一行数据</td>
      <td>点击该行任意位置切换复选框</td>
    </tr>
    <tr>
      <td><input type="checkbox"></td>
      <td>第二行数据</td>
      <td>同理，点击这里也能切换</td>
    </tr>
  </tbody>
</table>

关键逻辑说明：

事件委托绑定：把click事件绑定在<tbody>上，通过from tr过滤只有点击tr或其子元素时才触发，不用给每行单独加脚本。
定位当前行：用event.target.closest('tr')获取触发事件的最近<tr>元素（不管点击的是<td>还是里面的文本，都能正确找到所在行）。
限定查找范围：在找到的row内用find()查找复选框，确保只操作当前行的元素，不会影响其他行。
容错处理：加if checkbox exists判断，避免点击到无复选框的行时抛出错误。
切换选中状态：用Hyperscript的toggle指令直接切换checked属性，比手动取反更简洁。