比較所選單選按鈕的值

Question

我有下面的單選按鈕代碼。當特定用戶選擇第二個單選按鈕（value =「Selection_MQ--」）時，我需要檢查用戶是否選擇了特定的按鈕，然後通過警報消息顯示正確的答案，如果選擇第一個（value =「Selection_MA- - 「）然後錯誤的回答。我怎麼能做到這一點？

<td valign="center"><input type="radio" class="question selection" name="Answer_1" id="Answer_1" value="Selection_MA--" /></td> 
     <td valign="center"><span class="answer text">No</span></td> 
<td valign="center"><input type="radio" class="question selection" name="Answer_1" id="Answer_1" value="Selection_MQ--" /></td> 
     <td valign="center"><span class="answer text">Yes</span></td> 
var Answer_1_data = $('input[name="Answer_1"]:checked').val(); 

Answer 1

如果您的單選按鈕名稱相同，用戶只能選擇一個，所以該部分很容易。所有你需要做的是顯示正確的信息取決於哪一個被檢查。所有隻是普通的JavaScript。

// Object with correct answers 
 
var answers = { 
 
    Answer_1: 'Selection_MQ--' 
 
} 
 

 
// Function to check if answers are correct 
 
function checkAnswer(){ 
 
    alert(this.value == answers[this.name]? 'Correct!' : 'Wrong :-('); 
 
} 
 

 
// Attach listeners to radio buttons 
 
window.onload = function() { 
 
    [].forEach.call(document.querySelectorAll('input[name="Answer_1"]'), function (radio){ 
 
    radio.addEventListener('click',checkAnswer, false); 
 
    }); 
 
};

<fieldset><legend>Questions</legend> 
 
<label for="Answer_1a"><input type="radio" class="question selection" name="Answer_1" id="Answer_1a" value="Selection_MA--">No</label> 
 
<label for="answer_1b"><input type="radio" class="question selection" name="Answer_1" id="Answer_1b" value="Selection_MQ--">Yes</label> 
 
</fieldset>

這是代表團，其中無線電被包裹在一個字段並放置在字段集一個監聽器來檢查答案，而不是將一個監聽器上的每個單選按鈕很好的候選。

Answer 2

使用jQuery

<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> 
<script type="text/javascript"> 
     $(document).ready(function(){ 
     $("input[type='button']").click(function(){ 
var Answer_1_data = $('input[name="Answer_1"]:checked').val(); 
if(Answer_1_data){ 
       if(Answer_1_data=="Selection_MQ--") 
       alert("Correct Anwser"); 
      else 
       alert("Wrong Answer"); 
      } 
     }); 

    }); 
</script> 
<td valign="center"> 
<input type="radio" class="question selection" name="Answer_1" id="Answer_1" value="Selection_MA--" /></td> 
     <td valign="center"><span class="answer text">No</span></td> 
<td valign="center"> 
<input type="radio" class="question selection" name="Answer_1" id="Answer_1" value="Selection_MQ--" /></td> 
     <td valign="center"><span class="answer text">Yes</span></td> 
     <input type="button" id="btn" value="Submit"> 

使用JavaScript

<script type="text/javascript"> 
     function answer() 
     { 
      var ans = document.getElementsByName('Answer_1'); 

for (var i = 0, length = ans.length; i < length; i++) { 
    if (ans[i].checked) { 
     if((ans[i].value)=="Selection_MQ--") 
     alert("Correct Answer"); 
     else 
      alert("Wrong ANswer"); 
    } 
} 
     } 
</script> 
<td valign="center"> 
<input type="radio" class="question selection" name="Answer_1" id="Answer_1" value="Selection_MA--" /></td> 
     <td valign="center"><span class="answer text">No</span></td> 
<td valign="center"> 
<input type="radio" class="question selection" name="Answer_1" id="Answer_1" value="Selection_MQ--" /></td> 
     <td valign="center"><span class="answer text">Yes</span></td> 
     <input type="button" id="btn" value="Submit" onclick="answer()"> 

Answer 3

//如果單選按鈕被選中，否則爲false返回true

function radioButtonIsChecked(radioButton) { 
    if (radioButton.is(':checked') { 
     return true; 
    } else { 
     return false; 
    } 
} 

//獲取單選按鈕元素值爲

function getRadioButtonValue(radioButton) { 
    if (radioButtonIsChecked(radioButton) { 
     return radioButton.val(); 
    } else { 
     return null; 
    } 
} 


// try the code 
for (var i = 0; i < $('input[name="Answer_1"] ').length; i++) { 

    if ("Selection_MQ--" == getRadioButtonValue( $('#Answer_' + i)) { 
     alert("Correct Answer"); 
    } else { 
     alert("wrong answer"); 
    } 
}