checkbox 的第三种状态

[YIXUNFE]

checkbox 的第三种状态

我们知道，checkbox 元素的状态有两种，一种是 checked ，一种是 unchecked 。但实际上，checkbox 元素还有第三种状态 indeterminate。

indeterminate 状态

我们看看 MDN 中关于 indeterminate 状态的描述：

The indeterminate attribute is used to indicate that the checkbox is in an indeterminate state (on most platforms, this draws a horizontal line across the checkbox).

indeterminate 属性用于表述 checkbox 元素在一个不确定的状态（在大多数平台中，它被表示成一个横杠）。

firefox	chrome

设置 indeterminate 状态

虽然选中状态可以直接在 HTML 中设置，但 indeterminate 状态只能通过 JS 进行设置。

document.querySelector('checkbox').indeterminate = true

CSS 伪类

类似 :checked 和 :unchecked 伪类，我们也可以使用 :indeterminate 伪类进行对不确定状态的 checkbox 的选取。

:indeterminate + span {color: red;}

浏览器兼容性

暂时没有查询到具体的兼容性列表，从网上查看 IE 4.0 已经开始支持该属性。高级浏览器中设置应该也是没问题了。

对表单的影响

indeterminate 状态完全不影响 checkbox 的选中状态。

var chk = document.querySelector('checkbox')

chk.checked = false
chk.indeterminate = true //设置 indeterminate 状态
chk.checked //false

chk.checked = true
chk.indeterminate = true //设置 indeterminate 状态
chk.checked //true

设置 indeterminate 状态不会影响原来的 checkbox 的选中状态。

---

THANKS

[ziquanye]

原来如此，多谢解惑。