js单选按钮检查

Question

i am trying to add mutliple choice exam questions (like survey) to my site. For that i am using js and jquery. i added feature to make sure all group buttons have been checked. But the error is that I cannot resolve properly checking of selected ones. Js check only first if and if it is true then all questions have been answered true, if not then all answers are wrong.

here is my js code:

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

here is my 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>

i am stack to this point. it frankly seems stupid question but i am not spesialized in js. Thus, any assist would be appreciated

Answer 1

Because of this radio group selection, so you can only choose one; if you want to achieve that situation, you need to use checkbox to achieve;and the way to resolve ploblem is every options bind clickevent when clicking one of checkboxes,then the click func can achieve every option choosed

Answer 2

you can try this: you can create an object with questions and related correct answers:

 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>