按钮组联动实现问询：点击某按钮后其余按钮取消选中并变色

1. 先优化HTML结构（关键前提） #

你当前代码里所有按钮的id="b1"不符合规范（ID必须唯一），而且要给每个像素的按钮组做清晰的分组标记，方便后续JS定位：

<div class="row">
    <!-- 给每个像素容器加统一类名pixel-group，用data-index标记像素序号 -->
    <div class="col pixel-group" data-index="0"> Pixel 1
        <!-- 四个按钮统一用pixel-btn类，用data-value标记对应的值 -->
        <div class="row">
            <div class="btn-group-vertical-sm">
                <button class="pixel-btn" data-value="00"> 00</button>
                <button class="pixel-btn" data-value="01"> 01</button>
            </div>
        </div>
        <div class="row">
            <div class="btn-group-vertical-sm">
                <button class="pixel-btn" data-value="10"> 10</button>
                <button class="pixel-btn" data-value="11"> 11</button>
            </div>
        </div>
    </div> <!--end of col -->
    <!-- 其他15个像素同理，data-index依次递增 -->
</div>

2. JS逻辑实现组内联动 #

核心思路：点击按钮时，先找到它所属的像素组，重置组内所有按钮的选中状态，再给当前按钮标记选中，同时更新对应数组的值：

// 初始化存储像素值的数组，16个元素初始值设为"00"
const pixelValues = new Array(16).fill("00");

// 用事件委托绑定点击事件（适合后续扩展到512个像素，避免重复绑定）
document.addEventListener('click', function(e) {
    if (!e.target.classList.contains('pixel-btn')) return;

    const clickedBtn = e.target;
    // 定位当前按钮所属的像素组
    const pixelGroup = clickedBtn.closest('.pixel-group');
    const pixelIndex = pixelGroup.dataset.index;
    const selectedValue = clickedBtn.dataset.value;

    // 重置当前组内所有按钮的选中样式
    const allBtnsInGroup = pixelGroup.querySelectorAll('.pixel-btn');
    allBtnsInGroup.forEach(btn => btn.classList.remove('active'));

    // 给当前点击的按钮添加选中样式
    clickedBtn.classList.add('active');

    // 更新数组对应位置的值
    pixelValues[pixelIndex] = selectedValue;

    // 测试输出：控制台打印数组
    console.log(pixelValues);
});

3. CSS样式定义选中状态 #

给选中的按钮加明显的视觉区分：

.pixel-btn {
    /* 基础样式，可根据需求调整 */
    padding: 8px 16px;
    margin: 4px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #fff;
    cursor: pointer;
}

.pixel-btn.active {
    /* 选中状态样式，比如深色背景+白色文字 */
    background-color: #007bff;
    color: #fff;
    border-color: #0056b3;
}

非代码类建议 #

• 先小范围验证再扩展：先拿8个像素测试逻辑，确认联动、数组更新都没问题后，再批量生成512个像素的DOM（别手动写，用JS循环生成）。
• 组件化生成DOM：写一个函数批量生成像素组，比如：

  function createPixelGroup(index) {
      const group = document.createElement('div');
      group.className = 'col pixel-group';
      group.dataset.index = index;
      group.innerHTML = `
          Pixel ${index + 1}
          <div class="row"><div class="btn-group-vertical-sm">
              <button class="pixel-btn" data-value="00"> 00</button>
              <button class="pixel-btn" data-value="01"> 01</button>
          </div></div>
          <div class="row"><div class="btn-group-vertical-sm">
              <button class="pixel-btn" data-value="10"> 10</button>
              <button class="pixel-btn" data-value="11"> 11</button>
          </div></div>
      `;
      return group;
  }
  // 生成512个像素组
  const container = document.querySelector('.row');
  for (let i = 0; i < 512; i++) {
      container.appendChild(createPixelGroup(i));
  }
  

• 样式统一管理：用CSS变量定义选中/未选中的颜色，比如--btn-active-bg: #007bff;，后期修改样式只需要改变量值，不用逐个调整。

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