Skip to content

第 71 期(JavaScript-DOM):复选框的半选 #74

@wingmeng

Description

@wingmeng

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

image

与前两个状态值不同,indeterminate 状态无法在 HTML 中设置(HTML 中压根儿就没有 indeterminate 这个属性),你只能通过 JavaScript 来设置它。

checkboxElement.indeterminate = true;  // 设置 checkboxElement 为半选状态
checkboxElement.indeterminate;  // 判断 checkboxElement 是否为半选状态

注:checkbox 的 indeterminate 状态仅仅是视觉上的,它的真实值仍然只有 checkedunchecked,这意味着这个状态的真正价值只是在用户界面上看起来更友好而已。

另外 CSS 中有 :indeterminate 这个伪类:

/* 半选时让紧邻的 label 标签背景色变为红色 */
input:indeterminate + label {
  background: red;
}

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions