檢查是否有任何單選按鈕被選中，比執行代碼（多組按鈕）

Question

我做了一個多選題測試，使用PHP解析問題和答案的XML。生成的HTML看起來是這樣的：

<form> 
<div id="category0"> 
    <div id="set0"> 
     <div class="question">What is 6 x 6?</div> 
     <input type="radio" name="0" value="3">3<br> 
     <input type="radio" name="0" value="30">30<br> 
     <input type="radio" name="0" value="36">36<br> 
     <input type="hidden" class="answer" value="36"> 
    </div> 
    <div id="set1"> 
     <div class="question">What is 2 x 6?</div> 
     <input type="radio" name="1" value="4">4<br> 
     <input type="radio" name="1" value="12">12<br> 
     <input type="radio" name="1" value="36">43<br> 
     <input type="hidden" class="answer" value="12"> 
    </div> 
    <!-- A LOT MORE QUESTIONS --> 
</div> 
<div id="category1"> 
    <div id="set2"> 
     <div class="question">Which of these tools would you use to hammer a nail?</div> 
     <input type="radio" name="2" value="A hammer">A hammer<br> 
     <input type="radio" name="2" value="Another nail">Another nail<br> 
     <input type="radio" name="2" value="A saw">A saw<br> 
     <input type="hidden" class="answer" value="A hammer"> 
    </div> 
    <div id="set3"> 
     <div class="question">What color is a red truck?</div> 
     <input type="radio" name="3" value="red">red<br> 
     <input type="radio" name="3" value="blue">blue<br> 
     <input type="radio" name="3" value="green">green<br> 
     <input type="hidden" class="answer" value="red"> 
    </div> 
    <!-- A LOT MORE QUESTIONS --> 
</div> 
<!-- MORE CATEGORIES WITH A LOT OF QUESTIONS--> 
</form> 

分類命名 答案被保存在一個隱藏字段，並且是完全一樣的「類別」 +編號從0開始（category0，類別1 ...）正確的選項值。

我創建了一個JS函數，用於檢查選定的答案是否正確，並根據設置的顏色設置div的背景。該功能在每個無線電輸入中點擊觸發。

我需要幫助爲所有問題和每個類別分別創建統計/答案分數。 開始時得分是所有可能答案中的0。 如果我點擊第一個問題的正確選擇，得分將是所有可能問題中的1個，以及第一類問題中的1個。

我想實現此實時（當單擊任何按鈕時），無需發佈表單（無POST/GET）。

希望我描述了我的問題，所以你可以理解它，如果需要澄清，請讓我知道。 到目前爲止，我只使用JS，但任何jQuery解決方案也歡迎。

Answer 1

單擊單選按鈕時，執行您已經具有的相同邏輯來確定答案是否正確，但將其稱爲每個「類別」，而不僅僅是單擊的那個。

在0處啓動變量，並在每次找到正確答案時將其加1。然後，在循環之後，您可以使用變量的值更新您的「正確答案」消息。這不需要任何回傳。

Answer 2

你可以做這樣的事情

$('input[type="radio"]').change(function(){ 
 
    var answer = $(this).siblings('.answer').val(); 
 
    if ($(this).val() == answer) { 
 
    var score = $(this).parents().siblings('.score').val(); 
 
    score++; 
 
    $(this).parents().siblings('.score').val(score) 
 
    console.log(score); 
 
    } else { 
 
    
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<form> 
 
<div id="category0"> 
 
    <div id="set0"> 
 
     <div class="question">What is 6 x 6?</div> 
 
     <input type="radio" name="0" value="3">3<br> 
 
     <input type="radio" name="0" value="30">30<br> 
 
     <input type="radio" name="0" value="36">36<br> 
 
     <input type="hidden" class="answer" value="36"> 
 
    </div> 
 
    <div id="set1"> 
 
     <div class="question">What is 2 x 6?</div> 
 
     <input type="radio" name="1" value="4">4<br> 
 
     <input type="radio" name="1" value="12">12<br> 
 
     <input type="radio" name="1" value="36">43<br> 
 
     <input type="hidden" class="answer" value="12"> 
 
    </div> 
 
    <input type="hidden" class="score" value="0"> 
 
    <p></p> 
 
    <!-- A LOT MORE QUESTIONS --> 
 
</div> 
 
<div id="category1"> 
 
    <div id="set2"> 
 
     <div class="question">Which of these tools would you use to hammer a nail?</div> 
 
     <input type="radio" name="2" value="A hammer">A hammer<br> 
 
     <input type="radio" name="2" value="Another nail">Another nail<br> 
 
     <input type="radio" name="2" value="A saw">A saw<br> 
 
     <input type="hidden" class="answer" value="A hammer"> 
 
    </div> 
 
    <div id="set3"> 
 
     <div class="question">What color is a red truck?</div> 
 
     <input type="radio" name="3" value="red">red<br> 
 
     <input type="radio" name="3" value="blue">blue<br> 
 
     <input type="radio" name="3" value="green">green<br> 
 
     <input type="hidden" class="answer" value="red"> 
 
    </div> 
 
    <input type="hidden" class="score" value="0"> 
 
    <p><p> 
 
    <!-- A LOT MORE QUESTIONS --> 
 
</div> 
 
<!-- MORE CATEGORIES WITH A LOT OF QUESTIONS--> 
 
</form>