能否通过当前元素属性匹配其他元素？动态Checkbox场景方案问询

我们需要根据动态生成的checkbox的勾选状态，显示/修改对应data-id与checkbox的id匹配的元素样式。由于checkbox的id是编译阶段无法确定的动态值，尝试用SCSS的attr()和:has()组合无法实现需求，以下是可行思路：

示例HTML结构：

<input type="checkbox" id="test" name="try_me" value="0" />
<div>
    <div></div>
    <div>
        <div data-id="test">
            checkbox is checked content
        </div>
    </div>
    <div></div>
</div>

核心结论 #

纯CSS/SCSS无法实现该需求。因为CSS没有能力将一个元素的属性值（比如checkbox的id）作为选择器条件去匹配另一个元素的属性（比如div的data-id），attr()仅能用于设置元素的属性值（如content、background-image），无法作为选择器的一部分使用。

可行方案 #

方案1：JavaScript 监听状态并关联元素 #

这是最可靠的方案，通过监听checkbox的勾选状态变化，动态找到对应data-id的元素并修改其样式或类。

实现代码：

JavaScript：

// 全局监听checkbox的change事件
document.addEventListener('change', function(e) {
  const target = e.target;
  // 只处理checkbox类型的元素
  if (target.tagName === 'INPUT' && target.type === 'checkbox') {
    const checkboxId = target.id;
    // 匹配对应data-id的元素
    const relatedElement = document.querySelector(`[data-id="${checkboxId}"]`);
    if (relatedElement) {
      // 根据勾选状态切换样式类
      relatedElement.classList.toggle('checked-active', target.checked);
    }
  }
});

CSS：

/* 定义勾选状态下的样式 */
.checked-active {
  background-color: red;
  /* 可添加其他需要的样式，比如显示/隐藏 */
}

方案2：调整结构+自定义关联属性（纯CSS可选方案） #

如果动态生成HTML时，能给checkbox和对应元素添加相同的自定义属性（而非依赖id和data-id的关联），可以用CSS的:has()选择器实现纯CSS方案（需注意:has()的浏览器兼容性，目前现代浏览器已支持）。

调整后的HTML示例：

<input type="checkbox" id="test" data-group="checkbox-group-1" name="try_me" value="0" />
<div>
    <div></div>
    <div>
        <div data-group="checkbox-group-1">
            checkbox is checked content
        </div>
    </div>
    <div></div>
</div>

对应的CSS：

/* 当checkbox被勾选时，匹配同组的元素 */
input[type="checkbox"]:checked ~ div *:has([data-group="checkbox-group-1"]) {
  background-color: red;
}

注：如果需要批量处理多个组，可以在动态生成时为每组生成唯一的data-group值，再通过SCSS循环生成对应样式（但前提是编译阶段能获取到这些组值，否则还是JS方案更灵活）。

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