单选按钮切换时图片叠加不替换，未选中时img元素无法添加类

嘿，我仔细看了你的代码逻辑，发现了两个问题的核心原因，咱们一步步来搞定它们：

问题1：切换单选按钮时新增图片而非替换 #

你现在的代码每次点击单选按钮都会创建一个新的<img>元素，然后用append()把它加到容器里，自然会不断堆积图片。解决思路很简单：要么预先在页面里放好一个图片元素，每次只更新它的src；要么每次添加新图前先清空容器里的旧内容。

问题2：单选按钮未选中时图片类无法正确处理 #

目前的逻辑只在点击单选按钮时给新创建的图片加active类，但切换选项时，旧图片的类没被移除；而且如果没有选中任何单选按钮，也没有逻辑来控制图片的类状态。咱们可以统一处理类的添加/移除，确保状态始终正确。

修改后的完整代码 #

HTML部分

<div>
  <input type="radio" name="img-select" id="img1" value="https://picsum.photos/id/237/200/200">
  <label for="img1">图片1</label>
  
  <input type="radio" name="img-select" id="img2" value="https://picsum.photos/id/238/200/200">
  <label for="img2">图片2</label>
  
  <input type="radio" name="img-select" id="img3" value="https://picsum.photos/id/239/200/200">
  <label for="img3">图片3</label>
  
  <input type="radio" name="img-select" id="img4" value="https://picsum.photos/id/240/200/200">
  <label for="img4">图片4</label>
  
  <input type="radio" name="img-select" id="img5" value="https://picsum.photos/id/241/200/200">
  <label for="img5">图片5</label>
</div>

<!-- 预先放好图片容器和默认图片元素 -->
<div id="img-container">
  <img id="display-img" src="" alt="选中的图片" class="img-hidden">
</div>

CSS部分

.img-active {
  border: 3px solid red;
  display: block;
}

.img-hidden {
  display: none;
}

JavaScript部分

// 获取所有单选按钮和显示用的图片元素
const radios = document.querySelectorAll('input[name="img-select"]');
const displayImg = document.getElementById('display-img');

// 给每个单选按钮绑定点击事件
radios.forEach(radio => {
  radio.addEventListener('click', function() {
    // 更新图片的src
    displayImg.src = this.value;
    // 切换类状态：显示并激活图片
    displayImg.classList.remove('img-hidden');
    displayImg.classList.add('img-active');
  });
  
  // 处理单选按钮从选中变未选中的情况
  radio.addEventListener('change', function() {
    if (!this.checked) {
      // 检查是否还有选中的单选按钮
      const hasCheckedRadio = Array.from(radios).some(r => r.checked);
      if (!hasCheckedRadio) {
        // 没有选中项时，隐藏图片并移除激活类
        displayImg.classList.remove('img-active');
        displayImg.classList.add('img-hidden');
      }
    }
  });
});

关键修改点说明 #

1. 预先创建了固定的<img id="display-img">，避免每次点击都新增元素，只更新src就能实现图片切换
2. 用classList统一管理图片的显示/隐藏和激活状态，逻辑更清晰可控
3. 新增change事件监听，处理单选按钮从选中变为未选中的场景，确保所有状态下图片的类都能正确更新

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