Compare the value of selected radio button

Question

I have below code for radio button. When particular user select the 2nd radio button(value="Selection_MQ--") then I need to check if user has selected that particular button only then show message via alert message correct answer, and if select first one(value="Selection_MA--") then wrong answer. how I can do this?

<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

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

Using 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

// return true if radio button is checked otherwise false

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

// get the radio button element value

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

If you have radio buttons with the same name, users can only select one, so that part is easy. All you need to do then is show the correct message depending on which one is checked. All just plain 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>

This is a good candidate for delegation, where the radios are wrapped in a fieldset and a single listener placed on the fieldset to check answers, rather than putting a listener on every radio button.