本文详解如何使用 _hyperscript 快速、可靠地实现表格中“全选/取消全选”功能，支持双向同步（点击全选框统一控制，手动勾选/取消也实时更新全选状态），并提供简洁可复用的代码模式。
本文详解如何使用 _hyperscript 快速、可靠地实现表格中“全选/取消全选”功能，支持双向同步（点击全选框统一控制，手动勾选/取消也实时更新全选状态），并提供简洁可复用的代码模式。
在构建数据表格时，“全选/取消全选”是高频交互需求。_hyperscript 提供了极简而强大的 DOM 操作能力，但初学者常因选择器误用或状态同步逻辑缺失，导致全选失效、反向同步异常（如手动取消某一项后全选框未自动取消）等问题。本文将给出生产就绪的完整方案，兼顾简洁性与健壮性。
✅ 正确做法：基于 name 属性的声明式同步（推荐）
最可靠、语义最清晰的方式是为所有目标复选框统一设置 name 属性（例如 name="larm"），并在“全选”复选框中使用 _="on click set <input[name='larm']/>'s checked to my.checked"。该语法会一次性匹配并设置所有同名复选框的 checked 状态，无需循环或条件判断。
<table id="larmlista" class="table table-zebra">
<thead>
<tr>
<th>
<input id="select-all-larm" type="checkbox" class="checkbox checkbox-sm"
_="on click set <input[name='larm']/>'s checked to my.checked" />
</th>
<th>Plats</th>
<th>Namn</th>
<th>Ip</th>
</tr>
</thead>
<tbody>
<tr>
<th><input type="checkbox" class="checkbox checkbox-sm" name="larm" /></th>
<td>Office</td>
<td>Thing1</td>
<td>10.102.0.1</td>
</tr>
<tr>
<th><input type="checkbox" class="checkbox checkbox-sm" name="larm" /></th>
<td>Backyard</td>
<td>Thing2</td>
<td>10.102.0.23</td>
</tr>
<tr>
<th><input type="checkbox" class="checkbox checkbox-sm" name="larm" /></th>
<td>Kitchen</td>
<td>Thing3</td>
<td>10.102.0.16</td>
</tr>
</tbody>
</table>✅ 优势：代码仅一行，无 JS 逻辑，无副作用，天然支持动态新增的同名复选框（只要插入 DOM 即被自动纳入控制范围）。
? 双向同步：让全选框响应手动操作
上述单向控制（全选 → 子项）已足够常用，但若需“子项变化 → 自动更新全选框状态”（即用户手动取消任一复选框时，全选框自动变为未勾选；全部勾选时自动变为勾选），需补充监听逻辑：
<script type="text/hyperscript">
def updateSelectAll()
set #select-all-larm.checked to
(<input[name='larm']/>'s checked) do not contains false
end
on change from <input[name='larm']/>
call updateSelectAll()
end
</script>此段脚本：
- 定义 updateSelectAll() 函数：检查所有 name="larm" 复选框是否全部为 true（即 do not contains false）；
- 监听所有目标复选框的 change 事件，触发状态刷新；
- 确保全选框视觉状态与实际数据完全一致。
⚠️ 注意事项与最佳实践
- 务必为复选框设置 name 属性：这是 _hyperscript 批量操作的核心依据，比 class 或 id 更语义化且避免冲突。
- 避免使用 next <input/> 等脆弱定位：原问题中 get #larmlista then add @checked to the next <input/> 依赖 DOM 顺序，极易因结构微调而失效，应彻底弃用。
- <input[name='xxx']/> 是集合选择器：斜杠 / 表示“所有匹配元素”，set ...'s checked to value 会批量赋值，这是关键语法。
- do not contains false 是布尔聚合惯用法：等价于“所有都为 true”，比 every() 更简洁；若需“至少一个为 true”，可用 contains true。
- CDN 版本建议锁定版本：将 <script src="https://unpkg.com/_hyperscript@x.x.x/..."> 中的 @x.x.x 替换为具体版本号（如 @0.9.10），避免意外升级引入 breaking change。
通过以上方案，你将获得一个零 bug、易维护、符合 Web 标准的全选组件——无需框架、不写传统 JS，仅靠几行 _hyperscript 声明即可完成专业级交互。
