Bootstrap表单两组单选按钮互斥异常问题咨询

嘿，这个问题我太熟啦！你遇到的情况，核心原因是单选按钮的互斥分组逻辑完全依赖于name属性——浏览器会把所有拥有相同name值的单选按钮判定为同一组，同一组内只能同时选中一个选项，所以当你选第二题的选项时，浏览器会自动取消第一题同组的选中状态。

具体修复步骤： #

• 给第一题的所有单选按钮设置一个专属的name值，比如name="question1"
• 给第二题的所有单选按钮设置另一个不同的name值，比如name="question2"

修改后的代码示例（参考）： #

<div class="container mt-4">
  <!-- 第一题 -->
  <div class="form-group">
    <h5>第一题：[你的题目内容]</h5>
    <div class="form-check">
      <input class="form-check-input" type="radio" name="question1" id="q1-op1" value="op1">
      <label class="form-check-label" for="q1-op1">选项1</label>
    </div>
    <div class="form-check">
      <input class="form-check-input" type="radio" name="question1" id="q1-op2" value="op2">
      <label class="form-check-label" for="q1-op2">选项2</label>
    </div>
    <div class="form-check">
      <input class="form-check-input" type="radio" name="question1" id="q1-op3" value="op3">
      <label class="form-check-label" for="q1-op3">选项3</label>
    </div>
    <div class="form-check">
      <input class="form-check-input" type="radio" name="question1" id="q1-op4" value="op4">
      <label class="form-check-label" for="q1-op4">选项4</label>
    </div>
  </div>

  <!-- 第二题 -->
  <div class="form-group mt-4">
    <h5>第二题：[你的题目内容]</h5>
    <div class="form-check">
      <input class="form-check-input" type="radio" name="question2" id="q2-op1" value="op1">
      <label class="form-check-label" for="q2-op1">选项1</label>
    </div>
    <div class="form-check">
      <input class="form-check-input" type="radio" name="question2" id="q2-op2" value="op2">
      <label class="form-check-label" for="q2-op2">选项2</label>
    </div>
    <div class="form-check">
      <input class="form-check-input" type="radio" name="question2" id="q2-op3" value="op3">
      <label class="form-check-label" for="q2-op3">选项3</label>
    </div>
    <div class="form-check">
      <input class="form-check-input" type="radio" name="question2" id="q2-op4" value="op4">
      <label class="form-check-label" for="q2-op4">选项4</label>
    </div>
  </div>
</div>

这样修改后，两个题目的单选按钮就属于各自独立的分组，选中第二题的选项时，第一题的选中状态就不会被取消啦。

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