本文详解如何在 Hyperscript 中为页面多个表格独立实现行选择与全选功能，重点解决 in closest 作用域失效、全选状态同步异常及属性设置逻辑错误等常见问题。

本文详解如何在 hyperscript 中为页面多个表格独立实现行选择与全选功能，重点解决 `in closest

` 作用域失效、全选状态同步异常及属性设置逻辑错误等常见问题。

在使用 Hyperscript 构建可复用的表格交互组件时，一个典型需求是：同一页面存在多个结构相同的表格，每个表格需独立支持「逐行勾选」「全选/取消全选」「操作按钮状态联动」等功能。若直接使用全局 CSS 选择器（如 ），会导致跨表干扰；而简单添加 in closest

又常因语法优先级问题导致作用域绑定失败——这正是许多开发者遇到的核心痛点。

✅ 正确语法：用括号明确作用域边界

Hyperscript 中，in closest 的作用范围取决于其紧邻的表达式结构。若写成：

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

Hyperscript 会将 in closest

错误地解析为修饰 my.checked（即“在最近 table 内取 my.checked 的值”），而非修饰左侧的选择器——这导致选择器实际仍作用于全局 DOM，失去表格隔离性。

✅ 正确写法必须用括号显式包裹选择器 + 作用域：

set (<input> in closest 

)'s checked to my.checked

此时括号确保 in closest

严格限定 的匹配范围，真正实现“仅操作当前表格内的所有行复选框”。

? 完整可复用示例代码

以下是一个生产就绪的多表格选择模板（兼容 Hyperscript v0.9.11+）：

<!-- 每个表格结构一致，无需唯一 ID -->

删除所选项

	姓名
	张三
	李四

? 关键细节说明：

• 全选 checkbox 的 on selectionChanged 逻辑中，两个 length 计算必须使用完全相同的作用域表达式（即都带 in closest ），否则比对结果不可靠；
• 行复选框触发 selectionChanged 时，使用 closest 而非 previous，更健壮（避免 DOM 顺序变动影响）；
• 操作按钮（如删除）若位于 外（如
  内），则作用域应改为 in closest
  ，且同样需加括号：( in closest
  )。

  ⚠️ 常见误区与避坑指南

  错误写法

  问题原因

  正确方案

  set 's checked to ... in closest

  in closest 未绑定到选择器，作用域失效

  ✅ set ( in closest )'s checked to ...
  length of === 1 in closest

  in closest 被解析为修饰 1，非选择器

  ✅ length of ( in closest ) === 1

  使用 add @checked / remove @checked 替代 set ...'s checked

  手动操作属性易引发 checked="undefined" 等非法状态，破坏原生 checkbox 行为

  ✅ 始终用 set ...'s checked to Boolean，由 Hyperscript 统一管理属性

  ✅ 总结

  实现多表格独立选择的核心在于两点：

  1. 作用域精确性：所有涉及表格内元素的选择器，必须用 (... in closest ) 括号语法显式限定；
  2. 状态一致性：全选状态计算（selectionChanged）、批量设置（on click）、按钮联动三处逻辑，须共用完全相同的作用域表达式，避免因微小差异导致状态不同步。

  遵循此模式，即可零配置复用同一套 Hyperscript 逻辑于任意数量的表格，彻底告别 ID 冗余与跨表污染。