如何将单选按钮的父级DIV设置为卡片样式并优化选中时的样式切换代码？

嘿，这个需求在电商、表单场景里太常见了！先直接回答你的两个问题：

1. 如何选中用户点击的特定单选按钮的父级DIV？ #

你完全可以不用依赖自定义属性（比如aria-parent）来关联元素，用浏览器原生的DOM方法或者CSS选择器就能轻松定位。比如用JS的Element.closest()方法，或者CSS的:has()伪类，都能精准找到目标父级DIV。

2. 是否必须使用JavaScript实现？ #

完全不用！ 纯CSS就能实现这个效果，而且代码更简洁、维护成本更低，没有JS的运行时依赖。

方案一：纯CSS实现（推荐） #

利用CSS的:has()伪类，它可以检测容器内是否存在满足条件的元素，完美适配你的HTML结构：

.parentDiv {
  display: flex;
  align-items: center;
  cursor: pointer;
  border: 1px solid #eee;
  margin-bottom: 2rem;
  padding: 1rem; /* 可以加个内边距让卡片更美观 */
}

/* 核心：当label内的单选框被选中时，给对应的parentDiv添加边框样式 */
label:has(input[type="radio"]:checked) .parentDiv {
  border-color: green;
}

然后你可以直接删掉原来的JavaScript代码，HTML保持不变即可。

注意：:has()伪类目前已经被Chrome、Edge、Firefox 121+等主流浏览器支持，如果需要兼容非常老旧的浏览器（比如IE），再考虑用JS方案。

方案二：优化后的JavaScript实现 #

如果因为兼容性原因必须用JS，你的代码可以大幅简化，去掉自定义属性的依赖，用closest()方法直接定位父级：

const form = document.querySelector("form");

form.addEventListener("change", (e) => {
  // 先移除所有已选中的parentDiv的样式
  document.querySelectorAll(".parentDiv.selected").forEach(el => el.classList.remove("selected"));
  // 找到当前单选框的最近父级.parentDiv，添加选中样式
  e.target.closest(".parentDiv").classList.add("selected");
});

这里的closest(".parentDiv")会从触发事件的单选框（e.target）开始，向上遍历DOM树，找到第一个匹配.parentDiv的元素，精准又高效，不用再遍历所有父级DIV做匹配了。

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