修改JavaScript与HTML复选框的交互逻辑需求咨询

核心需求梳理 #

• 复选框按选中顺序对应SVG：先选中的颜色对应第一个SVG，第二个选中的对应第二个SVG，以此类推
• SVG使用唯一类名，替代统一的svg-icon优化结构
• 取消复选框选中时释放对应SVG位置，后续选中的颜色可填补空缺

修改后的完整代码 #

HTML（更新SVG类名） #

<input type="checkbox" class="checkbox" value="rubyRed">
<label>Ruby Red</label>

<input type="checkbox" class="checkbox" value="forestGreen">
<label>Forest Green</label>

<input type="checkbox" class="checkbox" value="oceanBlue">
<label>Ocean Blue</label>

<!-- 给每个SVG设置唯一类名，同时保留通用类统一控制样式 -->
<svg class="soap-svg soap-svg-1" viewBox="0 0 20 20">
    <path fill="#000000" d="M10,0C4.5,0,0,4.5,0,10c0,5.5,4.5,10,10,10s10-4.5,10-10C20,4.5,15.5,0,10,0z M15.3"/>
</svg>

<svg class="soap-svg soap-svg-2" viewBox="0 0 20 20">
    <path fill="#000000" d="M10,0C4.5,0,0,4.5,0,10c0,5.5,4.5,10,10,10s10-4.5,10-10C20,4.5,15.5,0,10,0z M15.3"/>
</svg>

<svg class="soap-svg soap-svg-3" viewBox="0 0 20 20">
    <path fill="#000000" d="M10,0C4.5,0,0,4.5,0,10c0,5.5,4.5,10,10,10s10-4.5,10-10C20,4.5,15.5,0,10,0z M15.3"/>
</svg>

CSS（适配新类名） #

/* 通用SVG样式 */
.soap-svg {
  width: 100px;
  height: 100px;
}

/* 颜色填充类 */
.rubyRed {
  fill: #9b111e;
}

.forestGreen {
  fill: #228b22;
}

.oceanBlue {
  fill: #00E7FF;
}

JavaScript（重写交互逻辑） #

const checkboxes = document.querySelectorAll('.checkbox');
// 获取所有SVG并转为数组，按页面顺序存储
const svgs = Array.from(document.querySelectorAll('.soap-svg'));
// 存储当前选中的颜色值，严格按照用户选中顺序排列
let selectedColors = [];

// 核心更新函数：根据选中顺序同步SVG样式
function updateSvgs() {
  // 先重置所有SVG的路径样式，避免残留类名
  svgs.forEach(svg => {
    const path = svg.querySelector('path');
    path.removeAttribute('class');
    path.setAttribute('fill', '#000000');
  });
  
  // 按选中顺序给对应位置的SVG绑定颜色类
  selectedColors.forEach((color, index) => {
    if (svgs[index]) {
      svgs[index].querySelector('path').setAttribute('class', color);
    }
  });
}

// 给每个复选框绑定状态变更事件
checkboxes.forEach(checkbox => {
  checkbox.addEventListener('change', function() {
    const color = this.value;
    if (this.checked) {
      // 选中时添加到数组末尾，保证顺序
      if (!selectedColors.includes(color)) {
        selectedColors.push(color);
      }
    } else {
      // 取消选中时从数组移除，后续元素自动前移填补空缺
      const colorIndex = selectedColors.indexOf(color);
      if (colorIndex !== -1) {
        selectedColors.splice(colorIndex, 1);
      }
    }
    // 触发SVG样式更新
    updateSvgs();
  });
});

逻辑说明 #

1. 顺序控制核心：用selectedColors数组存储选中的颜色，完全遵循用户点击顺序，是实现“先选先占”的关键。
2. 空缺自动填补：当取消某一选中项时，数组中后续元素会自动前移，再次执行updateSvgs时，后面的颜色会对应到前面空缺的SVG位置。
3. 唯一类名优化：每个SVG拥有soap-svg-1/soap-svg-2/soap-svg-3的唯一类名，同时保留soap-svg通用类，既满足结构唯一性需求，又能复用样式。
4. 样式重置机制：每次更新前清空所有SVG的样式，避免残留类名导致的颜色混乱问题。

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