Question

我有下面的单选按钮代码。当特定用户选择第二个单选按钮（值=“Selection_MQ--”）时，我需要检查用户是否选择了该特定按钮，然后通过警告消息正确答案显示消息，如果选择第一个（值=“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>

这是委派的一个很好的候选者，其中无线电被包裹在一个字段集中，一个监听器放在字段集上以检查答案，而不是在每个单选按钮上放置一个监听器。

比较所选单选按钮的值

3 个答案: