原生的表单控件 checkbox 有两种状态值:选中(checked)和未选中(unchecked)。其实在视觉效果上,checkbox 有三种状态:checked、unchecked 和 indeterminate。其中 indeterminate 表示不确定或半选状态,看起来就像这样子:

与前两个状态值不同,indeterminate 状态无法在 HTML 中设置(HTML 中压根儿就没有 indeterminate 这个属性),你只能通过 JavaScript 来设置它。
checkboxElement.indeterminate = true; // 设置 checkboxElement 为半选状态
checkboxElement.indeterminate; // 判断 checkboxElement 是否为半选状态
注:checkbox 的 indeterminate 状态仅仅是视觉上的,它的真实值仍然只有 checked 或 unchecked,这意味着这个状态的真正价值只是在用户界面上看起来更友好而已。
另外 CSS 中有 :indeterminate 这个伪类:
/* 半选时让紧邻的 label 标签背景色变为红色 */
input:indeterminate + label {
background: red;
}
原生的表单控件 checkbox 有两种状态值:选中(checked)和未选中(unchecked)。其实在视觉效果上,checkbox 有三种状态:
checked、unchecked和indeterminate。其中indeterminate表示不确定或半选状态,看起来就像这样子:与前两个状态值不同,
indeterminate状态无法在 HTML 中设置(HTML 中压根儿就没有 indeterminate 这个属性),你只能通过 JavaScript 来设置它。另外 CSS 中有
:indeterminate这个伪类: