有序列表中复选框必须嵌套在内，name/value需显式设置，用change事件监听状态，全选需处理indeterminate态并排除disabled项。
有序列表里不能直接放复选框，必须用 <li> 包裹 <input type="checkbox">
浏览器会忽略写在 <ol></ol> 或 <ul></ul> 直接子级的 <input>，比如 <ol>
<input><li>选项1</li>
</ol> —— 这个 <input> 会被丢弃或错位渲染。正确结构是每个复选框都作为 <li> 的第一个子元素存在：
<ol> <li> <input type="checkbox" name="choice" value="1"> 第一项</li> <li> <input type="checkbox" name="choice" value="2"> 第二项</li> </ol>
- 不要把复选框放在
<li>外面，也不要塞进<ol></ol>的开始标签后 - 如果需要点击文字也触发勾选，必须用
<label></label>包裹整个<input>和文本，否则只有小方块区域响应 - 有序列表的编号（1. 2. 3.）默认会和复选框挤在一起，建议用 CSS 控制
<li>的padding-left或display: flex对齐
name 和 value 必须显式设置，否则提交时拿不到数据
只写 <input type="checkbox"> 不设 name，表单提交时这个字段根本不会出现在请求参数里；不设 value，所有勾选项都会提交默认值 "on"，后端无法区分是哪一项。
-
name统一设为相同值（如name="choice"），后端才能收到数组形式的值（例如choice[]=1&choice[]=3） -
value应该是业务唯一标识（如数据库 ID、枚举 key），别用纯数字索引——列表顺序可能变，索引就失效了 - 避免用
id属性代替value，id是 DOM 标识，不是数据标识，重复会导致 JS 查询出错
监听状态变化要用 change，不是 click
用户可能用空格键、回车、屏幕阅读器或辅助工具切换复选框，click 事件完全捕获不到这些操作，导致 JS 逻辑脱节。
- 给每个
<input type="checkbox">绑定change事件，或者用事件委托绑定到<ol></ol>上 - 委托写法示例：
ol.addEventListener('change', e => { if (e.target.type === 'checkbox') { console.log(e.target.value, e.target.checked); } }); - 别用
e.target.setAttribute('checked', ...)控制状态——那是设初始属性，对已渲染元素无效；改用e.target.checked = true/false
全选/反选逻辑在有序列表里容易漏掉 indeterminate 状态
如果列表项是动态生成的，或者部分被禁用（disabled），仅靠“全部勾上/全部取消”无法反映真实选择状态。当部分项被选中时，全选控件应显示为“半选”（—），这只能通过 JS 设置 indeterminate 属性实现。
-
indeterminate是只读视觉态，HTML 属性无效，必须用 JS：selectAllCheckbox.indeterminate = true - 判断是否半选：统计
document.querySelectorAll('ol input[type="checkbox"]:not(:disabled):checked').length，再对比总有效项数 - 禁用项（
disabled）不会出现在:checked伪类里，也不会提交，所以统计时一定要排除它们，否则半选逻辑会错
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
