js单选按钮检查

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

由于选择了此无线电组，因此只能选择一个。 如果要解决这种情况，则需要使用复选框来实现；解决问题的方法是，在单击复选框之一时，每个选项都将clickevent绑定在一起，然后click func可以实现所选择的每个选项

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>