jQuery的測驗比較正確的答案在陣列

Question

我的HTML

<div class="questions"> 
    <p>Q1</p> 
    <label><input name="q1" id="q1-a" type="radio" />Q1 ans A</label> 
    <label><input name="q1" id="q1-b" type="radio" />Q1 ans B</label> 
    <label><input name="q1" id="q1-c" type="radio" />Q1 ans C</label> 
</div> 

<div class="questions hide"> 
    <p>Q2</p> 
    <label><input name="q2" id="q1-a" type="radio" />Q2 ans A</label> 
    <label><input name="q2" id="q1-b" type="radio" />Q2 ans B</label> 
    <label><input name="q2" id="q1-c" type="radio" />Q2 ans C</label> 
</div> 

<div class="questions hide"> 
    <p>Q3</p> 
    <label><input name="q3" id="q1-a" type="radio" />Q3 ans A</label> 
    <label><input name="q3" id="q1-b" type="radio" />Q3 ans B</label> 
    <label><input name="q3" id="q1-c" type="radio" />Q3 ans C</label> 
</div> 
<a href="#" id="checkAns">Check</a> 

MY JS

$("#checkAns").click(function(){ 

} 

下面是我想比較

answers: { q1: 'a', q2: 'b', q3: 'a'} 

答案的陣列如果用戶觸發單選按鈕，它會顯示警報如果是正確或錯誤，那麼它將返回true;如果錯誤的錯誤，那麼這是它將顯示回答的另一個問題的時間

我確實想避免如果在檢查用戶答案時是否可能？

Answer 1

首先，不要忘記增加每個單選按鈕的值。也不是真的在這裏需要id，除非你需要做的事情在每個單選按鈕：用於檢查答案

<div> 
    <label><input name="q1" type="radio" value="a" />Q1 A</label> 
    <label><input name="q1" type="radio" value="b" />Q1 B</label> 
    <label><input name="q1" type="radio" value="c" />Q1 C</label> 
</div> 

然後，您可以使用此：

var answers = {q1 : 'a', q2 : 'b', q3 : 'a'}; 

$('#checkAns').click(function(e) { 
    $.each(answers, function(question, answer) { 
     if($('input:radio[name="' + question + '"]:checked').val() == answer) 
      alert(question + ': True'); 
     else 
      alert(question + ': False!'); 
    }); 
    e.preventDefault(); 
}); 

---

更新的答案：

HTML & CSS

我認爲你不需要一個錨點來點擊，因爲這一次腳本在單選按鈕被觸發後立即檢查答案。

<style type="text/css"> 
    .hide { display:none; } 
</style> 

<div class="questions"> 
    <p>Q1</p> 
    <label><input type="radio" name="q1" value="a" />Q1 A</label> 
    <label><input type="radio" name="q1" value="b" />Q1 B</label> 
    <label><input type="radio" name="q1" value="c" />Q1 C</label> 
</div> 

<div class="questions hide"> 
    <p>Q2</p> 
    <label><input type="radio" name="q2" value="a" />Q2 A</label> 
    <label><input type="radio" name="q2" value="b" />Q2 B</label> 
    <label><input type="radio" name="q2" value="c" />Q2 C</label> 
</div> 

<div class="questions hide"> 
    <p>Q3</p> 
    <label><input type="radio" name="q3" value="a" />Q3 A</label> 
    <label><input type="radio" name="q3" value="b" />Q3 B</label> 
    <label><input type="radio" name="q3" value="c" />Q3 C</label> 
</div> 

的Javascript使用jQuery

var answers = {q1: 'a', q2: 'b', q3: 'a'}; 

$('input:radio').click(function() { 
    var container = $(this).parents('div'); 
    var question = $(this).attr('name'); 
    var answer = $(this).val(); 

    alert(answers[question] == answer); 

    container.addClass('hide'); 
    container.next().removeClass('hide'); 
}); 

只需修改腳本，因爲你需要。希望這一次是正確的..：P