如何检查多个格式的单选按钮?

时间:2017-01-16 15:30:20

标签: html

我有一个表格有很多选择题。每个问题都是一个div。以下代码和jsfiddle

上的演示
<form id="doExam" name="DoExam">
    <div>
       <p><b>Question 1:</b>question 1</p>
       <input type="radio" name="answer" value="A">Answer A<br>
       <input type="radio" name="answer" value="B">Answer B<br>
       <input type="radio" name="answer" value="C">Answer C<br>
       <input type="radio" name="answer" value="D">Answer D<br>
    </div>

    <div>
       <p><b>Question 2:</b>question 2</p>
       <input type="radio" name="answer" value="A">Answer A<br>
       <input type="radio" name="answer" value="B">Answer B<br>
       <input type="radio" name="answer" value="C">Answer C<br>
       <input type="radio" name="answer" value="D">Answer D<br>
    </div>

    <div>
       <p><b>Question 3:</b>question 3</p>
       <input type="radio" name="answer" value="A">Answer A<br>
       <input type="radio" name="answer" value="B">Answer B<br>
       <input type="radio" name="answer" value="C">Answer C<br>
       <input type="radio" name="answer" value="D">Answer D<br>
    </div>
</form>

当我检查1 div中的单选按钮时。它工作正常,但当我检查另一个div中的单选按钮时,我之前做过的div的单选按钮将丢失。我该如何解决?

2 个答案:

答案 0 :(得分:3)

每组单选按钮都需要一个唯一的名称。

<form id="doExam" name="DoExam">
  <div>
    <p><b>Question 1:</b>question 1</p>
    <input type="radio" name="answer" value="A">Answer A<br>
    <input type="radio" name="answer" value="B">Answer B<br>
    <input type="radio" name="answer" value="C">Answer C<br>
    <input type="radio" name="answer" value="D">Answer D<br>
  </div>

  <div>
    <p><b>Question 2:</b>question 2</p>
    <input type="radio" name="answer2" value="A">Answer A<br>
    <input type="radio" name="answer2" value="B">Answer B<br>
    <input type="radio" name="answer2" value="C">Answer C<br>
    <input type="radio" name="answer2" value="D">Answer D<br>
  </div>

  <div>
    <p><b>Question 3:</b>question 3</p>
    <input type="radio" name="answer3" value="A">Answer A<br>
    <input type="radio" name="answer3" value="B">Answer B<br>
    <input type="radio" name="answer3" value="C">Answer C<br>
    <input type="radio" name="answer3" value="D">Answer D<br>
  </div>
</form>

见更新的小提琴; https://jsfiddle.net/cuhcev3h/1/

答案 1 :(得分:1)

你应该为每个问题给出radiobuttons一个不同的名称

<form id="doExam" name="DoExam">
      <div>
        <p><b>Question 1:</b>question 1</p>
        <input type="radio" name="question1" value="A">Answer A<br>
        <input type="radio" name="question1" value="B">Answer B<br>
        <input type="radio" name="question1" value="C">Answer C<br>
        <input type="radio" name="question1" value="D">Answer D<br>
      </div>

  <div>
    <p><b>Question 2:</b>question 2</p>
    <input type="radio" name="question2" value="A">Answer A<br>
    <input type="radio" name="question2" value="B">Answer B<br>
    <input type="radio" name="question2" value="C">Answer C<br>
    <input type="radio" name="question2" value="D">Answer D<br>
  </div>

  <div>
    <p><b>Question 3:</b>question 3</p>
    <input type="radio" name="question3" value="A">Answer A<br>
    <input type="radio" name="question3" value="B">Answer B<br>
    <input type="radio" name="question3" value="C">Answer C<br>
    <input type="radio" name="question3" value="D">Answer D<br>
  </div>
</form>