比较所选单选按钮的值

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

使用 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 2

// 如果单选按钮被选中则返回 true 否则返回 false

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" );
    }
}

Answer 3

如果你有同名的单选按钮，用户只能选择一个，所以这部分很容易。 然后您需要做的就是根据选中的消息显示正确的消息。 所有只是普通的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>

这是委托的一个很好的候选者，其中收音机被包裹在一个字段集中，并且在字段集中放置一个监听器来检查答案，而不是在每个单选按钮上放置一个监听器。