如何在CSS中实现复选框与单选框的逻辑与（&&）校验？

当然可以实现！CSS的:checked伪类配合兄弟选择器或者:has()伪类，完全能搞定这种“复选框已勾选且单选按钮已选中”的逻辑与校验。我来给你分享两种实用的实现方式，适配不同的DOM结构场景：

方案一：依赖DOM顺序的兄弟选择器（兼容旧浏览器） #

如果你的表单元素是兄弟关系（或者可以调整成这种结构），用通用兄弟选择器~就能精准匹配条件：

HTML结构 #

<form class="multi-step-form">
  <!-- 复选框条件 -->
  <div class="checkbox-section">
    <input type="checkbox" id="agree-terms">
    <label for="agree-terms">我已阅读并同意服务条款</label>
  </div>

  <!-- 单选按钮组 -->
  <div class="radio-section">
    <input type="radio" name="subscription" id="monthly" value="monthly">
    <label for="monthly">月度订阅</label>
    
    <input type="radio" name="subscription" id="yearly" value="yearly">
    <label for="yearly">年度订阅</label>
  </div>

  <!-- 需要控制的下一步/提交元素 -->
  <button type="button" class="next-btn">进入下一步</button>
</form>

CSS样式 #

/* 默认状态：按钮禁用、灰化不可点击 */
.next-btn {
  opacity: 0.4;
  pointer-events: none;
  background-color: #ddd;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: not-allowed;
}

/* 核心逻辑：复选框已勾选 + 任意单选按钮已选中 */
#agree-terms:checked ~ .radio-section input[name="subscription"]:checked ~ .next-btn {
  opacity: 1;
  pointer-events: auto;
  background-color: #2563eb;
  color: white;
  cursor: pointer;
}

这里的~选择器会匹配当前元素之后的所有兄弟元素，所以要确保复选框在单选组前面，单选组在按钮前面，这样选择器才能链式匹配到目标按钮。

方案二：不依赖DOM顺序的:has()伪类（现代浏览器首选） #

如果你的DOM结构没法调整，或者不想受顺序限制，用CSS的:has()伪类会更灵活——它能直接检测父元素下是否存在满足条件的子元素：

CSS样式（HTML结构无需调整） #

/* 默认状态和上面一致 */
.next-btn {
  opacity: 0.4;
  pointer-events: none;
  background-color: #ddd;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: not-allowed;
}

/* 逻辑与校验：表单同时包含勾选的复选框和选中的单选按钮 */
.multi-step-form:has(#agree-terms:checked):has(input[name="subscription"]:checked) .next-btn {
  opacity: 1;
  pointer-events: auto;
  background-color: #2563eb;
  color: white;
  cursor: pointer;
}

:has()的优势非常明显，不管复选框、单选组和按钮在表单里的位置如何，只要两个条件同时满足，就会触发样式变化。不过要注意，:has()目前支持Chrome 105+、Firefox 121+、Safari 15.4+，如果需要兼容更老的浏览器，还是优先用方案一。

重要提醒 #

• 单选按钮必须设置相同的name属性，确保它们是同一组，只能选择一个。
• CSS控制只是前端视觉引导，不能替代后端校验！用户可以通过修改DOM或禁用CSS绕过限制，所以后端必须再做一次条件校验。

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