问卷按钮交互异常：同题单选变色，跨题误重置全部按钮

嘿，我明白你遇到的困扰了——现在不管点哪一题的按钮，所有题目的选中状态都会被重置，这是因为你的JS代码在操作页面上所有的.btn按钮，而不是只操作当前点击按钮所在的那道题的按钮组。咱们一步步来搞定这个问题：

1. 先修正HTML里的小错误 #

你写的<input>标签里多了个无效的button属性，比如：

<input type="button " value="Not at all likely " button id="tab1 " class="btn " onClick="changeColor(this.id) ">

得把多余的button删掉，同时推荐你把changeColor(this.id)改成changeColor(this)，直接传按钮元素本身，操作起来更方便：

<input type="button" value="Not at all likely" id="tab1" class="btn" onClick="changeColor(this)">

2. 修改JS逻辑，实现同题互斥 #

原来的逻辑是遍历所有按钮，现在我们要把操作范围限制在当前点击按钮所在的题目内，具体步骤：

• 点击按钮时，先找到这个按钮所属的问题容器（也就是包含它的.transbox）
• 只获取这个容器内的所有.btn按钮
• 遍历这些按钮，把当前点击的设为红色，其他恢复默认样式

修改后的JS代码：

function changeColor(clickedBtn) {
  // 找到当前按钮所在的题目容器
  const questionContainer = clickedBtn.closest('.transbox');
  // 只获取当前题目内的所有按钮
  const tabs = questionContainer.querySelectorAll('.btn');
  
  tabs.forEach(item => {
    // 给当前点击的按钮设红色，其他恢复默认
    item.style.backgroundColor = item === clickedBtn ? "red" : "";
  });
}

3. 为什么这样改？ #

• closest('.transbox')：这个方法会从当前元素往上找，第一个匹配.transbox的父元素就是当前题目的容器，完美把操作范围锁在单题内
• querySelectorAll('.btn')：只在当前题目容器里找按钮，不会影响其他题目的按钮状态
• 直接传按钮元素clickedBtn，比传id再重新查找元素更高效，逻辑也更直观

完整代码示例 #

修正后的HTML #

<div class="background1">
  <div class="transbox">
    <h3 align="center">Q1. Disagreeing with a friend on preferences.</h3>
    <table align="center">
      <tbody>
        <tr>
          <td><input type="button" value="Not at all likely" id="tab1" class="btn" onClick="changeColor(this)"></td>
          <td><input type="button" value="Slightly likely" id="tab2" class="btn" onClick="changeColor(this)"></td>
          <td><input type="button" value="Somewhat likely" id="tab3" class="btn" onClick="changeColor(this)"></td>
          <td><input type="button" value="Moderately Unlikely" id="tab4" class="btn" onClick="changeColor(this)"></td>
          <td><input type="button" value="Likely" id="tab5" class="btn" onClick="changeColor(this)"></td>
          <td><input type="button" value="Very likely" id="tab6" class="btn" onClick="changeColor(this)"></td>
          <td><input type="button" value="Extremely Likely" id="tab7" class="btn" onClick="changeColor(this)"></td>
        </tr>
      </tbody>
    </table>
  </div>
</div>
<div class="background2">
  <div class="transbox">
    <h3 align="center">Q2. Betting a day's income on horse racing.</h3>
    <table align="center">
      <tbody>
        <tr>
          <td><input type="button" value="Not at all likely" id="tab8" class="btn" onClick="changeColor(this)"></td>
          <td><input type="button" value="Slightly likely" id="tab9" class="btn" onClick="changeColor(this)"></td>
          <td><input type="button" value="Somewhat likely" id="tab10" class="btn" onClick="changeColor(this)"></td>
          <td><input type="button" value="Moderately Unlikely" id="tab11" class="btn" onClick="changeColor(this)"></td>
          <td><input type="button" value="Likely" id="tab12" class="btn" onClick="changeColor(this)"></td>
          <td><input type="button" value="Very likely" id="tab13" class="btn" onClick="changeColor(this)"></td>
          <td><input type="button" value="Extremely Likely" id="tab14" class="btn" onClick="changeColor(this)"></td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

CSS（保持不变） #

.btn {
  width: 100%;
  height: 100%;
}

修改后的JS #

function changeColor(clickedBtn) {
  const questionContainer = clickedBtn.closest('.transbox');
  const tabs = questionContainer.querySelectorAll('.btn');
  
  tabs.forEach(item => {
    item.style.backgroundColor = item === clickedBtn ? "red" : "";
  });
}

这样修改后，点击第一题的按钮只会影响第一题的选中状态，第二题的按钮完全不受干扰，正好符合你的需求！

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