如何在HTML中无需JavaScript实现父子Checkbox联动？

好问题！答案是可以不用JavaScript实现基础的父子Checkbox联动，甚至模拟父Checkbox的indeterminate视觉状态——不过得借助CSS的:has()伪类和自定义视觉元素来实现，核心是利用CSS的状态检测能力替代JS的逻辑判断。

核心思路 #

原生HTML里Checkbox的indeterminate属性只能通过JavaScript设置，但我们可以通过以下方式绕开这个限制：

1. 隐藏原生Checkbox，用自定义元素模拟它的外观（包括未选中、选中、半选中三种状态）
2. 利用:has()伪类检测子Checkbox的选中状态，动态切换父元素的视觉样式
3. 通过兄弟选择器实现父Checkbox点击时，全选/全不选所有子项的联动

完整示例代码 #

<div class="checkbox-group">
  <!-- 父Checkbox容器 -->
  <label class="parent-checkbox">
    <input type="checkbox" id="parent1">
    <span class="checkbox-visual"></span>
    Parent 1
  </label>
  
  <!-- 子Checkbox组 -->
  <div class="child-checkboxes">
    <label>
      <input type="checkbox" data-parent="parent1">
      Child 1
    </label>
    <label>
      <input type="checkbox" data-parent="parent1">
      Child 2
    </label>
    <label>
      <input type="checkbox" data-parent="parent1">
      Child 3
    </label>
  </div>
</div>

<style>
/* 隐藏原生Checkbox，用自定义视觉元素替代 */
.parent-checkbox input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* 自定义Checkbox的基础样式 */
.checkbox-visual {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 8px;
  border: 2px solid #333;
  vertical-align: middle;
  position: relative;
  cursor: pointer;
}

/* 1. 父Checkbox未选中：所有子项都未选 */
.parent-checkbox:not(:has([data-parent="parent1"]:checked)) .checkbox-visual {
  background-color: transparent;
}

/* 2. 父Checkbox选中：所有子项都选中 */
.parent-checkbox:has([data-parent="parent1"]:checked):not(:has([data-parent="parent1"]:not(:checked))) .checkbox-visual {
  background-color: #333;
}

/* 3. 父Checkbox半选中（indeterminate）：部分子项选中 */
.parent-checkbox:has([data-parent="parent1"]:checked):has([data-parent="parent1"]:not(:checked)) .checkbox-visual::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 2px;
  right: 2px;
  height: 2px;
  background-color: #333;
  transform: translateY(-50%);
}

/* 点击父Checkbox时，切换所有子项的选中状态 */
.parent-checkbox input[type="checkbox"]:checked ~ .child-checkboxes [data-parent="parent1"] {
  checked: checked;
}
.parent-checkbox input[type="checkbox"]:not(:checked) ~ .child-checkboxes [data-parent="parent1"] {
  checked: unset;
}
</style>

关键点说明 #

• 自定义视觉元素：.checkbox-visual模拟了Checkbox的三种状态，避免了原生indeterminate属性必须用JS设置的限制
• :has()伪类：这是实现无JS联动的核心，它能检测容器内子元素的状态组合（全选/全不选/部分选）
• 兼容性：:has()目前在Chrome、Edge、Safari 15.4+原生支持，Firefox需要手动开启layout.css.has-selector.enabled配置；如果要兼容旧浏览器，还是得搭配少量JS

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