第 71 期(JavaScript-DOM)：复选框的半选

[wingmeng]

原生的表单控件 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;
}