如何通过Checkbox实现所有图片切换为其他图片？该需求是否可行？

当然可以实现这个功能，下面是两种实用的实现思路及代码示例：

方法一：利用data属性存储备用图片路径 #

这种方式灵活性高，适合图片路径无统一规律的场景，直接在图片标签里定义备用路径：

<!-- HTML 结构 -->
<label>
  <input type="checkbox" id="imgToggle"> 切换图片组
</label>

<!-- 给需要切换的图片统一添加类名，并用data-alt-src存储另一组图片路径 -->
<img class="toggle-img" src="group1/img1.jpg" data-alt-src="group2/img1.jpg" alt="示例图1">
<img class="toggle-img" src="group1/img2.jpg" data-alt-src="group2/img2.jpg" alt="示例图2">
<img class="toggle-img" src="group1/img3.jpg" data-alt-src="group2/img3.jpg" alt="示例图3">

// JavaScript 逻辑
const toggleCheckbox = document.getElementById('imgToggle');
const targetImages = document.querySelectorAll('.toggle-img');

// 监听复选框的状态变化
toggleCheckbox.addEventListener('change', function() {
  targetImages.forEach(img => {
    // 交换当前图片路径和备用路径
    const tempSrc = img.src;
    img.src = img.dataset.altSrc;
    img.dataset.altSrc = tempSrc;
  });
});

方法二：预设两组图片路径数组 #

如果两组图片的路径有统一规律（比如只是目录名不同），可以直接定义两个路径数组，根据复选框状态切换：

<!-- HTML 结构和方法一一致 -->
<label>
  <input type="checkbox" id="imgToggle"> 切换图片组
</label>

<img class="toggle-img" src="group1/img1.jpg" alt="示例图1">
<img class="toggle-img" src="group1/img2.jpg" alt="示例图2">
<img class="toggle-img" src="group1/img3.jpg" alt="示例图3">

// JavaScript 逻辑
const toggleCheckbox = document.getElementById('imgToggle');
const targetImages = document.querySelectorAll('.toggle-img');

// 定义两组图片的完整路径
const imageGroup1 = ['group1/img1.jpg', 'group1/img2.jpg', 'group1/img3.jpg'];
const imageGroup2 = ['group2/img1.jpg', 'group2/img2.jpg', 'group2/img3.jpg'];

toggleCheckbox.addEventListener('change', function() {
  targetImages.forEach((img, index) => {
    // 根据复选框状态选择对应的图片组路径
    img.src = this.checked ? imageGroup2[index] : imageGroup1[index];
  });
});

两种方法都能实现需求，你可以根据自己的图片路径规律选择合适的方案。

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