表单单选选中项持久高亮与整区域点击选中问题技术咨询

我来帮你搞定这两个问题！先拆解下问题根源：

1. 跨问题高亮干扰：你当前的JS代码每次点击选项时，会重置所有.option的背景色，不管它们属于哪个问题，所以切换第二个问题的选项时，第一个问题的高亮就被清掉了。
2. 点击范围限制：现在只有点击单选框或label才会选中，要实现点击整个选项框触发选中，需要在容器的点击事件里主动选中内部的单选框。

下面是具体的修复方案，我还优化了代码结构，用CSS类来管理高亮状态（比直接操作style更易维护）：

第一步：修复HTML的重复ID问题 #

你的HTML里两个问题都用了id='option1'这类重复ID，这会导致label和单选框的关联失效，必须改成唯一ID：

<form> 
  <div class='option'> 
    <input type='radio' id='q1-option1' name="question1" value="option 1"> 
    <label for='q1-option1'> option 1 </label><br> 
  </div> 
  <div class='option'> 
    <input type='radio' id='q1-option2' name="question1" value="option 2"> 
    <label for='q1-option2'>option 2</label><br> 
  </div> 
  <div class='option'> 
    <input type='radio' id='q1-option3' name="question1" value="option 3"> 
    <label for='q1-option3'>option 3</label><br> 
  </div> 
  <div class='option'> 
    <input type='radio' id='q1-option4' name="question1" value="option 4"> 
    <label for='q1-option4'>option 4</label><br> 
  </div> 
</form> 
<p><strong> Question 2 of 10</strong></p> 
<p>Question 2</p> 
<form> 
  <div class='option'> 
    <input type='radio' id='q2-option1' name="question2" value="option 1"> 
    <label for='q2-option1'> 
      <div>option 1 </div> 
    </label><br> 
  </div> 
  <div class='option'> 
    <input type='radio' id='q2-option2' name="question2" value="option 2"> 
    <label for='q2-option2'>option 2</label><br> 
  </div> 
  <div class='option'> 
    <input type='radio' id='q2-option3' name="question2" value="option 3"> 
    <label for='q2-option3'>option 3</label><br> 
  </div> 
  <div class='option'> 
    <input type='radio' id='q2-option4' name="question2" value="option 4"> 
    <label for='q2-option4'>option 4</label><br> 
  </div> 
</form>

第二步：更新CSS，用类控制高亮 #

添加一个.active类来定义选中状态的背景色，保留原来的基础样式和hover效果：

.option { 
  border-top: 1px solid white; 
  border-bottom: 1px solid white; 
  display: flex; 
  justify-content: flex-start; 
  align-items: center; 
  flex-direction: row; 
  width: auto; 
  padding: 15px; 
  background-color: #f1f1f1;
  /* 加个cursor提示可点击 */
  cursor: pointer;
} 
.option:hover { 
  background-color: #ddd; 
} 
/* 选中状态的高亮样式 */
.option.active {
  background-color: blue;
}
label { 
  margin-left: 15px; 
}

第三步：重写JavaScript逻辑 #

现在我们只针对当前问题组的选项重置状态，并且支持点击整个容器选中单选框：

// 获取所有选项容器
const optionContainers = document.querySelectorAll('.option');

optionContainers.forEach(container => {
  container.addEventListener('click', function() {
    // 1. 找到当前容器内的单选框并选中它
    const radioInput = this.querySelector('input[type="radio"]');
    radioInput.checked = true;

    // 2. 获取当前单选框所属的问题组（通过name属性区分）
    const questionGroupName = radioInput.name;

    // 3. 找到同一个问题组的所有选项容器
    const sameQuestionOptions = Array.from(
      document.querySelectorAll(`.option input[name="${questionGroupName}"]`)
    ).map(input => input.closest('.option'));

    // 4. 清除当前问题组内所有选项的高亮
    sameQuestionOptions.forEach(opt => opt.classList.remove('active'));

    // 5. 给当前选中的选项添加高亮
    this.classList.add('active');
  });
});

效果说明 #

• 每个问题组的选中状态完全独立，切换第二个问题的选项时，第一个问题的高亮不会消失。
• 点击选项框的任意区域（包括空白处）都会选中对应的单选框，同时触发高亮。
• 用CSS类管理样式，后续要修改高亮颜色或其他样式，直接改.active类即可，不用动JS。

内容的提问来源于stack exchange，提问作者Nguyễn Minh Đức