indeterminate 不是 HTML 属性，只能通过 JavaScript 设置 DOM 元素的 indeterminate 属性为 true 或 false 才生效；直接写在 HTML 中会被浏览器忽略，且 setAttribute、框架绑定或误设 checked 均无效。
indeterminate 不是 HTML 属性，不能写在 <input type="checkbox"> 标签里；它只能通过 JavaScript 设置 DOM 元素的 indeterminate 属性为 true 或 false 才生效。
为什么直接写 indeterminate 在 HTML 里没用
浏览器解析 HTML 时会忽略 indeterminate 这个 attribute —— 它不在 HTML 标准中，也不是布尔属性。即使你写成 <input type="checkbox" indeterminate> 或 <input type="checkbox" indeterminate="true">，DOM 上的 indeterminate property 依然是 false，:indeterminate 伪类也完全不匹配。
常见错误还包括：
- 用
setAttribute('indeterminate', 'true')—— 这只改了 attribute，没动 property，无效 - 在 React/Vue 中试图用
v-model或value绑定indeterminate—— 它无法被声明式驱动，必须手动操作 DOM - 以为设置
indeterminate = true后checked会变 —— 实际上两者正交：checked保持原值（true或false），仅视觉切换
怎么用 JavaScript 正确设置 indeterminate
必须直接操作元素的 indeterminate property：
立即学习“前端免费学习笔记（深入）”；
const cb = document.querySelector('#my-checkbox');
cb.indeterminate = true; // ✅ 正确：设为半选
cb.indeterminate = false; // ✅ 正确：恢复为正常状态
注意：
- 设置后，
cb.checked值不变，但用户点击时，indeterminate会自动清为false，然后按常规逻辑翻转checked - 如果父复选框处于
indeterminate = true状态，点击它时应主动判断并重置：if (e.target.indeterminate) { e.target.indeterminate = false; e.target.checked = true; } - 不要在子项
change事件中直接读e.target.checked推导父状态 —— 此时父项的checked可能还没更新，得先遍历所有子项再计算
为什么设置了 indeterminate = true 却看不到半选样式
因为原生 checkbox 的半选图形由操作系统或浏览器 UA 样式硬编码控制，input:indeterminate { background: red; } 这类规则根本作用不到那个小方块上。
要让自定义样式生效，必须走通这条链：
- 先加
input[type="checkbox"] { appearance: none; }移除默认渲染 - 再用
input:indeterminate::before或input:indeterminate::after绘制自定义图形（比如短横线、方块内嵌图标） - 注意 Safari 对
::before在input上的支持不稳定，稳妥做法是用相邻label+position: absolute覆盖 - 确保选择器权重足够，例如框架用了
.el-checkbox input，你就得写.el-checkbox input:indeterminate
父子联动时最容易漏掉的关键点
树形结构中，子项变更后，父项不仅要设 indeterminate = true，还必须显式设 checked = false（或 true，但语义上推荐 false）—— 否则部分勾选时父项可能仍显示为已勾选，视觉与状态错位。
更隐蔽的问题是：清除状态时忘了设 indeterminate = false。比如全选后再取消一个子项，父项进入半选没问题；但如果之后全取消，只设了 checked = false 却漏掉 indeterminate = false，父项会卡在半选状态不动。
