复选框的:indeterminate状态只能通过JavaScript设置indeterminate属性实现，HTML和CSS无法控制；其视觉样式需注意优先级、浏览器兼容性及自定义渲染细节，且不触发change事件、不影响表单提交。
复选框的 :indeterminate 状态不是靠 HTML checked 属性控制的
浏览器不会根据 checked="false" 或缺失 checked 自动设为半选；:indeterminate 是纯 JavaScript 驱动的状态，且只读 —— 你不能用 HTML 属性或 CSS 设置它，只能用 JS 的 indeterminate 属性赋值。
常见错误是写 <input type="checkbox" indeterminate> 或试图在 CSS 里写 input:indeterminate { ... } 却发现样式不生效 —— 那是因为 DOM 节点根本没被设为 indeterminate。
- 必须用 JS 显式设置：
checkbox.indeterminate = true - 设置后，
checked值保持不变（仍为true或false），但视觉上呈现半选，且点击时行为重置为标准切换逻辑 - 注意：Safari 在较老版本中对
:indeterminate样式支持不稳定，建议测试 iOS 15.4+ / macOS Monterey+
:indeterminate 样式优先级比 :checked 低，需单独覆盖
默认情况下，多数浏览器的半选状态会沿用 :checked 的样式（比如背景色、图标），导致你设了 input:indeterminate { background: #aaa; } 却看不到效果 —— 因为 :checked 规则权重相同或更高，且更晚声明时会覆盖。
- 确保选择器 specificity 足够：用
input[type="checkbox"]:indeterminate比单纯:indeterminate更可靠 - 如果用了自定义 checkbox（如通过
::before/::after绘制），必须在:indeterminate下重新定义伪元素内容和位置 - 示例关键片段：
input[type="checkbox"]:indeterminate + label::before { background-color: #999; mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M6 13l2 2 6-6'/%3E%3C/svg%3E"); }
父子复选框联动时，indeterminate 是手动维护的中间态
树形结构或分组全选场景中，“部分子项选中 → 父项半选”这个逻辑完全由 JS 维护，浏览器不自动推导。很多人以为加个 querySelectorAll('input:checked').length 就够了，但漏掉了关键判断：
立即学习“前端免费学习笔记（深入）”；
- 父 checkbox 的
indeterminate必须显式设为true，且同时保持checked为false（否则显示为已选而非半选） - 子项变化后，要重新计算：若全部子项
checked === true→ 父设checked = true, indeterminate = false；若全为false→checked = false, indeterminate = false；否则 →checked = false, indeterminate = true - 注意事件冒泡：子项 change 不应直接触发父项 change，推荐用
dispatchEvent(new Event('change', {bubbles: false}))避免循环更新
移动端 Safari 和旧版 Edge 对 :indeterminate 的渲染有视觉偏差
即使 JS 正确设置了 indeterminate = true，某些环境下半选图标可能偏小、居中不准，或与 :checked 图标重叠。这不是 CSS 写错了，而是原生控件渲染差异。
- 不要依赖
appearance: none后仅改background—— 半选状态需要独立 SVG 或 Unicode 字符（如\2212短横） - 避免用
transform: scale()调整半选图标大小，容易引发 Safari 渲染错位；改用width/height+background-size - 调试时可用
getComputedStyle(checkbox).getPropertyValue('-webkit-appearance')确认是否仍走原生渲染路径
change 事件，也不影响表单序列化（FormData 或 form.elements 中它仍按 checked 值提交）。这意味着你必须把 indeterminate 当作纯 UI 状态来管理，业务逻辑永远只看 checked。 
