本文详解如何在 Hyperscript 中为页面中多个独立表格实现健壮的“全选/取消全选”及行选择联动逻辑，重点解决 in closest 作用域失效、状态同步异常等常见陷阱。

本文详解如何在 hyperscript 中为页面中多个独立表格实现健壮的“全选/取消全选”及行选择联动逻辑，重点解决 `in closest

` 作用域失效、状态同步异常等常见陷阱。

在使用 Hyperscript 构建可复用的表格组件时，一个典型需求是：同一页面存在多个结构相似的表格，每个表格需独立支持「行单选/多选」+「全选复选框」+「操作按钮（如删除、编辑）状态联动」。看似简单，但若未准确理解 Hyperscript 的作用域限定语法，极易陷入状态错乱——例如点击某表的“全选”仅生效一次、跨表误触发、或按钮禁用状态不同步等问题。

核心问题在于：in closest 必须严格绑定到目标元素集合上，而非附加在属性操作符之后。错误写法如：

set <input>'s checked to my.checked in closest 

此语句实际含义是：先全局查找所有匹配 ' 的元素，再对其中每个元素执行 checked = my.checked，最后将 in closest

作为孤立修饰语（无语法效力） —— 导致作用域失效，甚至影响其他表格。

✅ 正确写法必须用括号显式包裹选择器 + 作用域限定，形成原子化查询：

set (<input> in closest 

)'s checked to my.checked

此时 Hyperscript 先在当前事件源（即被点击的全选框）的最近

内查找所有匹配的行复选框，再统一设置其 checked 属性值，完美隔离多表格上下文。

完整可复用实现示例

以下为生产就绪的 Hyperscript 片段（适配任意数量同构表格）：

<!-- 每个表格结构一致 -->

	Name	Email
	Alice	a@example.com

Delete Selected Edit One

关键注意事项

• 作用域括号不可省略：( in closest ) 是强制语法，确保查询范围精准。遗漏括号将导致全局匹配。
• 按钮定位需匹配上下文：若操作按钮不在 内（如置于外层
  ），则 in closest 应替换为 in closest
  ，且确保该
  是表格的最近公共容器。
• 避免 add @checked / remove @checked：直接操作 checked 属性值（set ...'s checked to true/false）更符合语义，且能正确响应原生 checkbox 的 indeterminate 状态（如部分选中时需额外处理）。
• 性能友好：Hyperscript 的 in closest 是惰性查询，仅在事件触发时执行，无需手动维护状态变量。

通过严格遵循括号化作用域语法，即可让多表格选择逻辑完全解耦、稳定运行，真正实现模板化复用。