JS радиокнопки проверить

я пытаюсь добавить mutliple choice экзаменационные вопросы (как опрос) на мой сайт. Для этого я использую 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>

я стек к этому моменту. это, честно говоря, кажется глупым вопросом, но я не spesialized в js. Таким образом, любая помощь будет оценена

2 ответа

  1. Из-за этого выбора радио группы, так что вы можете выбрать только один; если вы хотите, чтобы достичь этой ситуации, вам нужно использовать флажок, чтобы достичь;и способ решить ploblem является каждый параметры привязки clickevent при нажатии одного из флажков,то нажмите func может достичь каждый вариант choosen

  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>