如何用JavaScript实现forEach循环中单选并取消其他项选中状态

你的代码存在几个关键问题导致功能失效：

1. 选择器误用：querySelectorAll("#selected") 不能用id选择器，HTML中id是唯一标识，应该改用类选择器（比如把元素的id="selected"改成class="selected"，再用document.querySelectorAll(".selected")获取）。
2. 事件逻辑错误：你给每个元素绑定了两个冲突的点击事件，且selected.classList.remove无效——selected是NodeList集合，不是单个DOM元素，必须遍历集合内所有元素才能移除类。

正确逻辑是：点击元素时，先清空所有元素的选中状态，再给当前点击的元素添加选中类。

完整代码示例 #

HTML（先修正元素类名）

<div class="selected">选项1</div>
<div class="selected">选项2</div>
<div class="selected">选项3</div>

JavaScript

// 获取所有可选中的元素
const items = document.querySelectorAll(".selected");

// 给每个元素绑定点击事件
items.forEach(item => {
  item.addEventListener("click", () => {
    // 移除所有元素的选中类
    items.forEach(el => el.classList.remove("cardActive"));
    // 给当前点击的元素添加选中类
    item.classList.add("cardActive");
  });
});

补充优化（动态元素场景） #

如果元素是动态生成的，用事件委托能提升性能：

const parentContainer = document.querySelector(".items-wrapper"); // 假设父容器类名为items-wrapper
parentContainer.addEventListener("click", (e) => {
  if (e.target.classList.contains("selected")) {
    items.forEach(el => el.classList.remove("cardActive"));
    e.target.classList.add("cardActive");
  }
});

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