实现复选框选中创建带img src的div，取消选中时移除的功能

嘿，我来帮你把这个功能补全！你要的是选中复选框就创建带对应图片的div，取消选中就删掉它，同时保留原有的更新loc-selected图片的功能对吧？咱们一步步来实现：

1. 先理清楚HTML结构（示例） #

首先假设你的复选框带有自定义属性存储对应的图片地址，你也可以根据实际DOM结构调整：

<!-- 示例复选框组 -->
<label>
  <input type="checkbox" class="img-checkbox" data-img="sunset.jpg" id="cb-sunset">
  日落
</label>
<label>
  <input type="checkbox" class="img-checkbox" data-img="mountain.jpg" id="cb-mountain">
  山脉
</label>

<!-- 存放动态生成的图片Div的容器 -->
<div id="selected-images-wrap"></div>

<!-- 你原有的预览图片 -->
<img id="loc-selected" src="" alt="当前选中预览">

2. 完整JavaScript实现 #

这段代码会监听每个复选框的change事件，处理创建/移除逻辑，同时保留你原有的预览功能：

// 获取需要用到的DOM元素
const checkboxes = document.querySelectorAll('.img-checkbox');
const container = document.getElementById('selected-images-wrap');
const previewImg = document.getElementById('loc-selected');

// 给每个复选框绑定事件
checkboxes.forEach(cb => {
  cb.addEventListener('change', function() {
    const imgSrc = this.dataset.img;
    // 生成唯一的Div ID，和当前复选框关联
    const targetDivId = `img-div-${this.id}`;

    if (this.checked) {
      // 选中状态：创建新的Div和Img
      const imgDiv = document.createElement('div');
      imgDiv.id = targetDivId;
      // 加个样式类方便自定义样式
      imgDiv.classList.add('selected-img-container');

      const newImg = document.createElement('img');
      newImg.src = imgSrc;
      newImg.alt = `选中的${this.nextSibling.textContent.trim()}`;

      imgDiv.appendChild(newImg);
      container.appendChild(imgDiv);

      // 保留你原有的更新预览图功能
      previewImg.src = imgSrc;
    } else {
      // 取消选中：移除对应的Div
      const divToRemove = document.getElementById(targetDivId);
      if (divToRemove) {
        divToRemove.remove();
      }
    }
  });
});

3. 关键细节说明 #

• 关联复选框和Div：用复选框的id生成对应的Div ID，这样能精准找到要移除的元素，避免误删
• 自定义属性存图片地址：用data-img存储图片路径，比依赖DOM位置（比如找复选框旁边的img）更灵活，后期修改结构也不容易出错
• 保留原有功能：代码里保留了更新loc-selected图片的逻辑，和新功能不冲突
• 样式自定义：给生成的Div加了selected-img-container类，你可以自己写CSS来调整展示效果，比如：

.selected-img-container {
  display: inline-block;
  margin: 10px;
  border: 2px solid #ccc;
  border-radius: 4px;
}
.selected-img-container img {
  width: 100px;
  height: 100px;
  object-fit: cover;
}

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