indeterminate是JavaScript设置的只读DOM属性，非HTML属性，仅影响type="checkbox"视觉状态（显示横杠），不改变checked值、不参与表单提交、不触发change事件，需配合JS逻辑与:indeterminate伪类实现父子联动半选效果。
<input> 标签本身没有 indeterminate 属性，它是一个JavaScript可设置的只读 DOM 属性，仅对 type="checkbox"（以及部分浏览器支持的 type="radio"）生效，用于视觉上呈现“半选”（即中间横线）状态。
HTML 中无法通过 <input type="checkbox" indeterminate> 这样的写法直接声明 —— 因为 indeterminate 不是合法的 HTML 属性，浏览器会忽略它。必须通过 JS 脚本动态设置。
✅ 正确做法：用 JavaScript 设置 indeterminate
<input type="checkbox" id="main">
<label for="main">全选/取消</label>
<script>
const checkbox = document.getElementById('main');
checkbox.indeterminate = true; // 视觉显示为半选（无勾、无空，中间一横）
// 注意：此时 checkbox.checked 仍为 false（不影响表单提交值）
</script>⚠️ 关键点：
indeterminate = true不改变checked状态（checked保持原值，通常为false）；- 它纯粹是视觉提示，表示“子项状态不一致”，常用于树形选择、全选框等场景；
- 该状态不会被表单提交，服务器收不到
indeterminate信息。
? 常见使用场景示例：父子复选框联动
<input type="checkbox" id="selectAll"> 全选<br>
<input type="checkbox" class="item" value="1"> 选项1<br>
<input type="checkbox" class="item" value="2"> 选项2<br>
<input type="checkbox" class="item" value="3"> 选项3<br>
<script>
const selectAll = document.getElementById('selectAll');
const items = document.querySelectorAll('.item');
// 点击全选框时：控制所有子项
selectAll.addEventListener('change', () => {
items.forEach(cb => cb.checked = selectAll.checked);
});
// 点击任意子项时：更新全选框状态
items.forEach(item => {
item.addEventListener('change', () => {
const checkedCount = document.querySelectorAll('.item:checked').length;
if (checkedCount === 0) {
selectAll.checked = false;
selectAll.indeterminate = false;
} else if (checkedCount === items.length) {
selectAll.checked = true;
selectAll.indeterminate = false;
} else {
selectAll.checked = false; // 保持 false 才能显示半选
selectAll.indeterminate = true;
}
});
});
</script>❌ 常见误区
-
<input type="checkbox" indeterminate>→ 无效，HTML 不识别； -
indeterminate = true后又设checked = true→ 半选消失，变成勾选； - 期望
indeterminate触发change事件 → ❌ 不会触发（它不是用户交互产生的状态变更）； - 在
input上直接写indeterminate="true"→ 解析为字符串属性，无效果。
? 补充说明
- 浏览器兼容性良好（Chrome、Firefox、Safari、Edge 均支持）；
-
indeterminate对radio类型也有效（但极少用），行为类似； - CSS 中可通过
:indeterminate伪类单独设置样式（如自定义半选图标）：
input[type="checkbox"]:indeterminate {
accent-color: #6a5acd;
}
/* 或配合 appearance: none 自定义外观 */不复杂但容易忽略细节。
立即学习“前端免费学习笔记（深入）”；
