js单选按钮检查

Question

我正试着在我的网站上添加多个选择题(比如调查)。为此，我使用了js和jquery。我添加了一项功能，以确保所有组按钮都已选中。但错误是我不能正确地解决所选项目的检查。如果是真的，那么所有问题都被回答为真，如果不是，那么所有的答案都是错误的。

下面是我的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

由于这种单选组合的选择，所以你只能选择一个；如果你想实现这种情况，你需要使用checkbox来实现；而解决问题的方法是在每个选项绑定clickevent的时候点击其中一个复选框，那么点击函数就可以实现所选的每个选项

Answer 2

您可以尝试这样做:您可以创建一个带有问题和相关正确答案的对象：

​

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

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

​