能否通过querySelector找到处于indeterminate状态的HTML input？

能否用querySelector找到indeterminate状态的input？ #

不行。indeterminate是DOM元素的内部属性，不会渲染为<input>标签上的HTML属性（你看不到<input indeterminate>这种写法），而querySelector依赖的CSS选择器只能匹配HTML属性、标准伪类等，目前没有原生CSS选择器能直接定位处于该状态的元素。

怎么实现indeterminate状态？ #

这个状态只能通过JavaScript设置，示例代码：

// 选中目标复选框
const checkbox = document.getElementById('target-checkbox');
// 开启不确定状态
checkbox.indeterminate = true;
// 关闭不确定状态
checkbox.indeterminate = false;

CSS能管这个状态吗？ #

CSS没法设置或切换indeterminate状态，但可以用:indeterminate伪类给处于该状态的复选框加样式：

input:indeterminate {
  /* 比如修改复选框的边框颜色 */
  border-color: #e53935;
}

记住，样式只是视觉表现，状态本身的切换必须靠JS。

批量获取indeterminate状态的input #

如果要批量筛选这类元素，不能直接用querySelectorAll，但可以先获取所有复选框再用JS过滤：

const indeterminateBoxes = Array.from(document.querySelectorAll('input[type="checkbox"]'))
  .filter(box => box.indeterminate);

内容的提问来源于stack exchange，提问作者Slbox