本文介绍如何用 _hyperscript 快速实现表格中“全选/取消全选”复选框，通过统一 name 或 class 选择器批量控制状态，避免手动遍历、逻辑错位和状态不同步问题。
本文介绍如何用 _hyperscript 快速实现表格中“全选/取消全选”复选框，通过统一 `name` 或 `class` 选择器批量控制状态，避免手动遍历、逻辑错位和状态不同步问题。
在构建数据表格时，“全选/取消全选”是高频需求，但传统 JavaScript 实现易出错，而 _hyperscript 提供了声明式、语义清晰的解决方案。核心在于利用属性选择器统一定位目标复选框，并同步其 checked 状态，无需手动遍历或维护中间状态。
✅ 推荐方案：基于 name 属性（最可靠）
为所有待控制的复选框设置相同的 name（如 name="larm"），并在“全选”控件中使用以下 _ 指令：
<input id="select-all-larm" type="checkbox" class="checkbox checkbox-sm" name="larm_all" _="on click set <input[name='larm']/>'s checked to my.checked" />
对应子项复选框只需确保 name="larm" 即可：
<input type="checkbox" class="checkbox checkbox-sm" name="larm" />
✅ 优势：
- name 是表单语义标准，天然支持分组；
- <input[name='larm']/>'s checked 语法会精确匹配所有同名复选框，并一次性设置其 checked 属性；
- 无须额外 JS 函数或状态监听，行为完全由点击事件驱动，逻辑零耦合。
⚠️ 注意事项与常见误区
- 不要混用 id 或 next 定位：原始代码中 get #larmlista then add @checked to the next <input/> 依赖 DOM 顺序，极易因结构微调（如插入新行、添加空格）失效，且仅影响首个兄弟节点，无法批量操作。
- 避免手动维护“全选”状态同步逻辑：如示例中 handleChecked() 函数试图反向推导全选框状态，不仅冗余，还因未处理“部分勾选→全选框变半选”等 UI 规范场景，导致体验不一致（_hyperscript 本身不原生支持 indeterminate 状态，需 CSS/JS 辅助）。
-
class 方案可作为补充：若无法修改 name（如后端框架限制），可统一添加 class（如 class="larm-checkbox"），改用：
_="on click set .larm-checkbox.checked to my.checked"
注意：.larm-checkbox.checked 是简写语法，等价于 set .larm-checkbox's checked to my.checked。
? 完整可运行示例（精简版）
<script src="https://unpkg.com/_hyperscript@0.9.13/dist/_hyperscript.min.js"></script>
<table class="table table-zebra">
<thead>
<tr>
<th>
<input
type="checkbox"
class="checkbox checkbox-sm"
_="on click set <input[name='item']/>'s checked to my.checked"
/>
</th>
<th>名称</th>
<th>IP 地址</th>
</tr>
</thead>
<tbody>
<tr><td><input type="checkbox" name="item" /></td><td>Server A</td><td>10.0.0.1</td></tr>
<tr><td><input type="checkbox" name="item" /></td><td>Server B</td><td>10.0.0.2</td></tr>
<tr><td><input type="checkbox" name="item" /></td><td>Server C</td><td>10.0.0.3</td></tr>
</tbody>
</table>? 提示：若需支持“半选”视觉态（indeterminate），可在 _ 指令外补充少量 JS 设置 indeterminate 属性（<input>.indeterminate = true），但注意该属性仅影响显示，不影响 checked 值——_hyperscript 的批量赋值仍以 my.checked 为准。
综上，用 name 分组 + set <selector/>'s checked to my.checked 是最简洁、健壮、符合直觉的实现方式，彻底规避状态不同步与 DOM 依赖风险，让“全选”回归本应具备的确定性与可维护性。
