如何使用JavaScript实现自定义单选选择器，选中一项时自动取消其余项选中状态

方案1：原生JS实现（无需修改原有HTML结构） #

第一步：新增选中状态CSS样式 #

你可以根据需求自定义样式，示例如下：

.new__order__choice .juice__box.active {
  /* 选中状态样式，可自行修改 */
  background-color: var(--second-sub-color);
  color: #fff;
  border-color: var(--second-sub-color);
}

第二步：添加单选交互JS代码 #

确保代码在DOM加载完成后执行，可以放在</body>标签前，或者包裹在DOM加载完成事件中：

document.addEventListener('DOMContentLoaded', function() {
  // 获取所有选项元素
  const juiceOptions = document.querySelectorAll('.juice__box');
  
  // 可选：默认选中第一个选项
  // juiceOptions[0].classList.add('active');

  juiceOptions.forEach(option => {
    option.addEventListener('click', function() {
      // 移除所有选项的选中状态
      juiceOptions.forEach(item => item.classList.remove('active'));
      // 给当前点击的选项添加选中状态
      this.classList.add('active');

      // 如需获取选中值，可直接通过this.textContent获取
      // console.log('当前选中：', this.textContent.trim());
    });
  });
});

方案2：纯HTML+CSS实现（无需写JS代码） #

利用原生radio单选框的默认特性实现，仅需调整原有HTML结构：

第一步：修改HTML结构 #

把每个.juice__box改为关联隐藏radio的label，所有radio设置相同的name属性即可默认触发单选逻辑：

<div class="row">
  <div class="col-lg-3 col-md-12 col-sm-12">
    <input type="radio" name="juice" id="juice1" hidden>
    <label class="juice__box" for="juice1">Juice 1</label>
  </div>
  <div class="col-lg-3 col-md-12 col-sm-12">
    <input type="radio" name="juice" id="juice2" hidden>
    <label class="juice__box" for="juice2">Juice 2</label>
  </div>
  <!-- 剩余5个选项按照上述格式修改即可 -->
</div>

第二步：新增选中状态CSS样式 #

.new__order__choice input[name="juice"]:checked + .juice__box {
  /* 选中状态样式，可自行修改 */
  background-color: var(--second-sub-color);
  color: #fff;
  border-color: var(--second-sub-color);
}

该方案无需编写任何JS代码，依靠浏览器原生特性实现单选，兼容性更好，表单提交时可直接获取radio的value值，适合需要表单提交的场景。

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