0

0

css伪类:checked与:indeterminate结合

P粉602998670

P粉602998670

发布时间:2025-10-27 18:33:02

|

779人浏览过

|

来源于php中文网

原创

:checked表示复选框或单选按钮被选中,:indeterminate表示复选框处于半选状态,需JavaScript设置;二者互斥,可通过CSS分别定义样式以区分状态,常用于树形选择器中父节点状态展示。

css伪类:checked与:indeterminate结合

在CSS中,:checked:indeterminate 是两个用于表单控件(特别是复选框和单选按钮)的伪类,它们可以分别表示控件的选中状态和“不确定”状态。虽然它们不能直接通过逻辑与结合使用(即不能同时为真),但在实际开发中可以通过合理组织样式来实现对这两种状态的独立或组合控制。

:checked 与 :indeterminate 的区别

:checked 表示复选框(checkbox)被勾选,或单选按钮(radio)被选中。这是一个明确的用户选择状态。

:indeterminate 表示复选框处于“半选”状态,这通常不是用户直接操作的结果,而是通过JavaScript设置其 indeterminate 属性来实现,常用于父子级联选择的场景中(如树形菜单中的父节点)。

如何使用 :indeterminate

由于HTML没有直接表示“半选”的属性,所以需要JavaScript辅助:

立即学习前端免费学习笔记(深入)”;

  • 获取复选框元素
  • 设置 element.indeterminate = true
  • CSS 中用 :indeterminate 来样式化该状态

例如: