本文详解如何用 _hyperscript 快速、可靠地实现表格中“全选/取消全选”复选框功能，支持双向同步（点击全选框统一控制，点击任意子项自动更新全选状态），避免常见逻辑陷阱。
本文详解如何用 _hyperscript 快速、可靠地实现表格中“全选/取消全选”复选框功能，支持双向同步（点击全选框统一控制，点击任意子项自动更新全选状态），避免常见逻辑陷阱。
在构建数据表格时，“全选/取消全选”是高频交互需求。_hyperscript 以其简洁声明式语法极大简化了这类 DOM 操作，但若未正确处理双向同步逻辑（如子项变更后全选框状态未及时更新），极易出现体验断裂——例如手动取消一个子项后，“全选框”仍保持勾选状态，违背用户直觉。
✅ 正确实现：单向控制 + 双向响应
最简健壮方案分两步：统一命名 + 精准选择器。为所有目标复选框添加相同 name 属性（推荐），或统一 class（备选），再通过 _hyperscript 指令批量操作。
1. 基础 HTML 结构（关键：统一 name）
| Plats | Namn | Ip | |
|---|---|---|---|
| Office | Thing1 | 10.102.0.1 | |
| Backyard | Thing2 | 10.102.0.23 | |
| Kitchen | Thing3 | 10.102.0.16 |
2. 补充双向同步逻辑（可选但强烈推荐）
仅靠全选框单向控制不够——当用户手动勾选/取消任意子项时，全选框应自动反映整体状态（全选 → 勾选，部分选 → 不勾选，全不选 → 取消）。需添加 handleChecked 函数：
<script type="text/hyperscript">
def handleChecked(checkbox)
-- 获取所有同名复选框
set allCheckboxes to <input[name='larm']/>
-- 统计已勾选项数量
set checkedCount to 0
for cb in allCheckboxes
if cb.checked then set checkedCount to checkedCount + 1
end
-- 更新全选框状态：仅当全部勾选时才勾选全选框
if checkedCount == allCheckboxes.length then
set <input[name='larm_all']/>'s checked to true
else
set <input[name='larm_all']/>'s checked to false
end
end
</script>
对应全选框需补充 name="larm_all"：
<input type="checkbox" class="checkbox checkbox-sm" name="larm_all" _="on click set <input[name='larm']/>'s checked to my.checked">
每个子项绑定事件：
<input type="checkbox" class="checkbox checkbox-sm" name="larm" _="on click handleChecked(me)">
? 关键提示
- ✅ 务必为复选框设置 name 属性：这是 _hyperscript 选择器的基石，比 class 更语义化且不易冲突。
- ⚠️ 避免使用 next 等模糊定位：原始代码中 get #larmlista then add @checked to the next 仅影响紧邻下一个元素，无法批量操作，是典型错误。
- ? 若必须用 class，请确保 class 名唯一（如 .larm-checkbox），指令改为：set .larm-checkbox.checked to my.checked。
- ? 注意：'s checked 是 _hyperscript 的标准属性访问语法，不可写作 checked=true 或 @checked。
此方案兼顾简洁性与鲁棒性，无需 JavaScript 手动遍历，完全由 _hyperscript 声明式完成状态同步，符合现代前端“逻辑即配置”的开发哲学。
