js radio buttons check

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

http://stackoverflow.com/a/596369/4229270 – Sinto May 23 '16 at 08:05 — Sinto, May 23 '16 at 08:05

score 0 · Answer 1 · answered May 23 '16 at 08:48

0

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

answered May 23 '16 at 08:48

johnny.lee

1
1

i think you misunderstood my question. i dont want to select more than one choice. i want to check all 'checked' answers, but cannot accomplish that – ISkandar May 23 '16 at 11:40

Amani Ben Azzouz · Answer 2 · 2016-05-23T12:38:36.030

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>

hhhm, it is right. But is not competable for my case. Since right answers. are not the same in all cases. So loop is not okay in my case. Any further suggestions?)) — ISkandar, May 23 '16 at 12:13
in your question you are checking if each selected value is equal to "right".. i did the same but in a loop.. so how your right answer are marked? — Amani Ben Azzouz, May 23 '16 at 12:18
there is no general pattern. Right answers are stored in database which will paste to javascript front-end. like this. if ($("input[@name='${variant.id}']:checked").val() == "${variant.rightAnswer}") { rightAnswers = rightAnswers + 1; — ISkandar, May 23 '16 at 12:33
I think it would be better if you create an object indicating all question with the related correct answers .. see updated answer. — Amani Ben Azzouz, May 23 '16 at 12:39

js radio buttons check

2 Answers2