复选框控制元素显示与样式方法

/* ❌ 语法错误：CSS 不允许在 :has() 中使用 attr() 动态取值 */
input[type="checkbox"] {
  ~ div *:has([data-id=attr(id)]) {
    background-color: red;
  }
}

✅ 推荐方案一：使用 :has() 伪类（现代浏览器首选）

CSS :has() 提供了父容器内“基于后代状态反向影响祖先/同级”的能力，是解决该问题最简洁、声明式的方案——前提是将相关元素组织在同一语义化容器内。

基础用法（单个复选框）

<div class="control-group">
  &lt;input type=&quot;checkbox&quot; id=&quot;toggle-banner&quot; /&gt;
  <div class="banner-content">欢迎启用横幅！</div>
</div>

/* 当 checkbox 被勾选时，显示 banner-content */
.control-group:has(#toggle-banner:checked) .banner-content {
  display: block;
  background-color: #ff6b6b;
  padding: 12px;
  border-radius: 4px;
}
.banner-content {
  display: none; /* 默认隐藏 */
}

扩展用法（多个独立复选框 + 多组内容）

可结合 id 与对应 class 实现一对一样式绑定，无需硬编码选择器逻辑：

<div class="control-group">
  &lt;input type=&quot;checkbox&quot; id=&quot;feature-a&quot; /&gt;
  &lt;input type=&quot;checkbox&quot; id=&quot;feature-b&quot; /&gt;

  <div class="feature-panel feature-a">功能 A 已启用</div>
  <div class="feature-panel feature-b">功能 B 已启用</div>
</div>

.feature-panel {
  display: none;
  padding: 10px;
  margin-top: 8px;
  border-left: 4px solid #3498db;
}

.control-group:has(#feature-a:checked) .feature-a {
  display: block;
  background-color: #e3f2fd;
}

.control-group:has(#feature-b:checked) .feature-b {
  display: block;
  background-color: #e8f5e9;
}

✅ 优势：纯 CSS、无 JS、响应式（自动响应 checked 状态变化）
⚠️ 注意：:has() 目前在 Chrome 105+、Edge 105+、Safari 15.4+ 中稳定支持；Firefox 自 121 版本起默认启用。CanIUse 数据 显示全球约 93% 的桌面用户已支持（截至 2024 年中）。若需支持旧版浏览器，请降级至方案二。

✅ 推荐方案二：轻量级 JavaScript（全浏览器兼容）

当项目需兼容 IE、旧版 Firefox 或部分移动端 WebView 时，推荐使用极简 JS 监听 + class 切换模式，保持逻辑清晰、性能高效：

// 获取所有复选框（支持动态插入）
document.querySelectorAll('input[type="checkbox"]').forEach(checkbox => {
  checkbox.addEventListener('change', function () {
    const targetClass = this.id; // 利用 id 作为目标元素的 class 名
    const targetEl = document.querySelector(`.${targetClass}`);

    if (targetEl) {
      targetEl.classList.toggle('active', this.checked);
    }
  });
});

配套 CSS：

.feature-panel {
  display: none;
}
.feature-panel.active {
  display: block;
  background-color: #4CAF50;
  color: white;
  padding: 12px;
  border-radius: 4px;
}

HTML 示例（注意 id 与 class 保持一致）：

<input type="checkbox" id="promo-banner" />
<input type="checkbox" id="newsletter-signup" />

<div class="promo-banner feature-panel">限时促销横幅已显示</div>
<div class="newsletter-signup feature-panel">订阅弹窗已就绪</div>

? 提示：此方案天然支持动态生成的 DOM（如 SPA 中异步加载的内容），只需确保事件监听器注册时机合理（如在元素挂载后执行）。

总结与选型建议

无论采用哪种方式，核心设计原则不变：避免尝试用 CSS 解析动态属性值，转而通过结构约定（容器/命名一致性）或脚本桥接建立可控映射关系。这既符合 Web 标准演进方向，也保障了长期可维护性。

好了，本文到此结束，带大家了解了《复选框控制元素显示与样式方法》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！