:indeterminate状态只能通过javascript设置checkbox.indeterminate=true触发，html无indeterminate属性；仅对原生checkbox生效，自定义需手动加class；浏览器默认渲染差异大，firefox无视觉提示，须用css重绘；父子联动需js手动计算状态。
复选框的 :indeterminate 状态不是靠 HTML 属性触发的
很多人以为加个 indeterminate="true" 就能激活 :indeterminate，但这是错的——HTML 标准里根本不存在这个属性。浏览器只认 JavaScript 的 indeterminate 属性（注意：是 JS 属性，不是 HTML 属性），且它只读写、不反映在 DOM 上。
所以你必须用 JS 设置：
checkbox.indeterminate = true;之后，
:indeterminate 才会生效。纯 CSS 无法进入该状态，也别指望用 [indeterminate] 这类属性选择器捕获它。
:indeterminate 只对原生 <input type="checkbox"> 有效
自定义 checkbox（比如用 label + span + 隐藏原生 input）时，:indeterminate 不会作用于你的伪元素或替代节点——它只匹配真实的 input 元素本身。想让“半选”样式出现在自定义 UI 上，得手动加 class：
- 监听原生 input 的
change或indeterminate变化（通过MutationObserver不现实，得靠逻辑控制） - JS 设置
indeterminate = true后，同步给外层容器加class="is-indeterminate" - 再用
.custom-checkbox.is-indeterminate .checkmark控制样式
主流浏览器支持没问题，但默认样式差异大
Chrome / Edge / Safari 都支持 :indeterminate，但它们对半选状态的默认渲染完全不同：
- Chrome：显示为一个短横线（—），居中，无动画
- Safari：显示为一个实心方块（■），比全选小一圈
- Firefox：不渲染任何视觉提示（即：
:indeterminate匹配成功，但 checkbox 外观不变）
这意味着，如果你只依赖浏览器默认行为，用户在 Firefox 里根本看不到“半选”。必须配合自定义背景图、appearance: none 和伪元素重绘：
input[type="checkbox"]:indeterminate {
-webkit-appearance: none;
appearance: none;
background: #e0e0e0;
}
input[type="checkbox"]:indeterminate::before {
content: "";
display: block;
width: 60%;
height: 60%;
margin: 20% auto;
background: #333;
}
父子级 checkbox 联动时，indeterminate 是纯 JS 状态管理
常见场景：一个父 checkbox 控制多个子项，当部分子项被勾选时，父项应进入半选状态。这里没有自动机制——浏览器不会帮你推导父项是否“部分选中”。
你需要自己写逻辑：
- 监听所有子项的
change事件 - 统计已勾选数量：
checkedCount和总数：totalCount - 当
0 时，设置 <code>parentCheckbox.indeterminate = true，并手动清除parentCheckbox.checked（否则它会显示为全选） - 注意：设置
indeterminate = true会清空checked值，但反过来，改checked不会影响indeterminate状态
最易忽略的一点：indeterminate 是瞬时状态，它不参与表单提交，也不改变 value；它纯粹是个 UI 提示信号，和数据无关。别试图把它当成第三种值存进后端。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
