Question

我正在尝试将多项选择题考试（如调查）添加到我的网站。为此我使用js和jquery。我添加了功能，以确保已检查所有组按钮。但错误是我无法正确检查所选的。 Js首先检查是否为真，然后所有问题都回答为真，否则所有答案都是错误的。

这是我的js代码：

function doAjaxPost() {
    var result = 4;
    var rightAnswers = 0;
    var allmarked = 0;
    var response = "";
    $('.answers').each(function() {
        if ($(this).find('input[type="radio"]:checked').length > 0) {
            allmarked = allmarked + 1;
        } else {
            alert("not all checked");
        }
    });
    if (allmarked == result) {
        allmarked = 0;

        if ($("input[@name=7]:checked").val() == "right") {
            rightAnswers = rightAnswers + 1;
        }

        if ($("input[@name=8]:checked").val() == "right") {
            rightAnswers = rightAnswers + 1;
        }

        if ($("input[@name=9]:checked").val() == "right") {
            rightAnswers = rightAnswers + 1;
        }

        if ($("input[@name=10]:checked").val() == "right") {
            rightAnswers = rightAnswers + 1;
        }

        $('#info').html(rightAnswers + " / " + result);
    }
}

这是我的HTML：

<div class="clearfix single_content">
    <div class="tom-right">
        <h4 class="tom-right">1.4</h4> 
        <br />
        <ul class="answers">
            <input type="radio" name="9" value="1" id="9a" />
            <label for="9a">1</label>
            <br/>
            <input type="radio" name="9" value="2" id="9b" />
            <label for="9b">2</label>
            <br/>
            <input type="radio" name="9" value="3" id="9c" />
            <label for="9c">3</label>
            <br/>
            <input type="radio" name="9" value="right" id="9d" />
            <label for="9d">right</label>
            <br/>
        </ul>
    </div>
</div>


<div class="clearfix single_content">
    <div class="tom-right">
        <h4 class="tom-right">1.5</h4> 
        <br />
        <ul class="answers">
            <input type="radio" name="10" value="1" id="10a" />
            <label for="10a">1</label>
            <br/>
            <input type="radio" name="10" value="2" id="10b" />
            <label for="10b">2</label>
            <br/>
            <input type="radio" name="10" value="3" id="10c" />
            <label for="10c">3</label>
            <br/>
            <input type="radio" name="10" value="right" id="10d" />
            <label for="10d">right</label>
            <br/>
        </ul>
    </div>
</div>

我到目前为止。坦率地说，这似乎是一个愚蠢的问题，但我并没有在js中表现出来。因此，任何协助将不胜感激

Answer 1

由于这个无线电组选择，所以你只能选择一个;如果你想实现这种情况，你需要使用复选框来实现;而解决ploblem的方法是每个选项绑定clickevent时单击其中一个复选框，然后click func可以实现选择的每个选项

Answer 2

你可以试试这个：您可以创建一个包含问题和相关正确答案的对象：

＆＃13;

function doAjaxPost() {
var result = $('.answers').length;
var rightAnswers =0 ;
var response= "" ;
var error=false;
var correct_answers = [{question_number:1,answers_number:5},
                       {question_number:10,answers_number:2},
                       {question_number:9,answers_number:3}];

$('.answers').each(function(){
      if($(this).find('input[type="radio"]:checked').length > 0){
        var question_number=$(this).find('input[type="radio"]:checked').attr("name");
        var answer_number   =$(this).find('input[type="radio"]:checked').val();
        $.each(correct_answers, function( index, value ) {
           if(question_number==value.question_number && answer_number==value.answers_number)rightAnswers++;
        });
      }
      else error=true;
          
}); 
if(error) alert("not all checked"); //display the error once 
else $('#info').html(rightAnswers + " / " + result);
  
}

$('#check_values').click(function(){
doAjaxPost();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="clearfix single_content">
            <div class="tom-right">
                    <h4 class="tom-right">1.4</h4> <br />
                        <ul class="answers">  
                        <input type="radio" name="9" value="1" id="9a" />
                        <label for="9a">1</label><br/>          
                        <input type="radio" name="9" value="2" id="9b" />
                        <label for="9b">2</label><br/>            
                        <input type="radio" name="9" value="3" id="9c" />
                        <label for="9c">3</label><br/>            
                        <input type="radio" name="9" value="4" id="9d" />
                        <label for="9d">4</label><br/>
                        </ul>
            </div>
        </div>


        <div class="clearfix single_content">
            <div class="tom-right">
                    <h4 class="tom-right">1.5</h4> <br />
                        <ul class="answers">  
                        <input type="radio" name="10" value="1" id="10a" />
                        <label for="10a">1</label><br/>          
                        <input type="radio" name="10" value="2" id="10b" />
                        <label for="10b">2</label><br/>            
                        <input type="radio" name="10" value="3" id="10c" />
                        <label for="10c">3</label><br/>            
                        <input type="radio" name="10" value="4" id="10d" />
                        <label for="10d">4</label><br/>
                        </ul>
            </div>
        </div>
        <input type="button" id="check_values" value="Check"/>
        <p id="info"></p>

＆＃13;

js单选按钮检查

2 个答案: