2017-01-16 64 views
0

我有一個表單有很多選擇題。每個問題都是一個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的單選按鈕將會丟失。我該如何解決它?

+0

你應該使用['fieldset'](https://developer.mozilla.org/en/docs/Web/HTML/Element/fieldset)而不是普通的'div',這就是 – vsync

+0

As'name'設置告訴該字段屬於哪個單選按鈕組。當您選擇一個按鈕時,同一組中的所有其他按鈕都將被取消選中。因此,您需要在不同的div中使用不同的名稱。 –

回答

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/

+0

已被接受。儘可能簡單 – mtizziani

+1

將'name'屬性看作單選按鈕**組**。同一組中的任何單選按鈕將從同一組中的任何其他單選按鈕中進行選擇。 – BryanH

+0

但在jsp中通過for循環創建考試時,如何分配唯一名稱? –

1

你應該給每個單選按鈕的問題不同的名稱

<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>