Question

我遇到了与单选按钮有关的问题。问题是我大约有7个问题，每个问题在2列中有2个单选按钮选项。因此，如果我为第一个问题选择一个选项，然后想为第二个问题选择该选项。所选的单选按钮从第一个问题消失，并出现在第二个问题上。问题是我不能选择多个问题。

这是代码

<td colspan="4" style="align-items: center;">
  <div class="form-group m-0 m-b-15">
    <div class="radio mt-radio-inline">
      <input type="radio" name="q1"  id="q_1_w" >
      <label for="q_1_w" >Yes</label>
      <input type="radio" name="q1"  id="q_1_x">
      <label for="q_1_x" style="margin-left: 30px;">No</label>
    </div>
  </div>
</td>
<td colspan="6">
  <div class="form-group m-0 m-b-15">
    <div class="radio mt-radio-inline">
      <input type="radio" name="q1" id="q_1_y" >
      <label for="q_1_y" >Yes</label>
      <input type="radio" name="q1" id="q_1_z">
      <label for="q_1_z" style="margin-left: 30px;">No</label>
    </div>
  </div>
</td>

Answer 1

我认为问题是因为您为所有单选按钮指定了相同的名称，请尝试使用不同的名称。例如：-

第二个尝试使用name =“ q2”。

    <div class="form-group m-0 m-b-15">
     <div class="radio mt-radio-inline">
     <input type="radio" name="q2"  id="q_1_y" ><label for="q_1_y" >Yes</label>
     <input type="radio" name="q2"  id="q_1_z"><label for="q_1_z" style="margin-left: 30px;">No</label>
    </div>

Answer 2

这样做：

const myForm = document.forms['my-form']

myForm.onsubmit = evt =>
  {
  evt.preventDefault() // disable submit
  
  console.clear()
  console.log('q1 =', myForm.q1.value )
  console.log('q2 =', myForm.q2.value )
  }

<form name="my-form">
  <h5> Question 1 </h5>

  <label> <input type="radio" name="q1" value="yes"> Yes </label>
  <label> <input type="radio" name="q1" value="no"> No </label>

  
  <h5> Question 2 </h5>

  <label> <input type="radio" name="q2" value="yes"> Yes </label>
  <label> <input type="radio" name="q2" value="no"> No </label>

  <hr>
  <button type="submit"> read values </button>
</form>

无法为多个问题选择单选按钮选项

2 个答案: