如何检查单选按钮是否被选中

Question

I am working on a quiz system. In that what I want to do is that the questions are collected from database and put as follow using php :

<div class="span12" style="margin-top:140px;">
<ul id="part">
<?php //print_r($quiz); 

$i = 1; 
foreach($quiz as $quiz)
{
    echo "<li id='div$i' style='display:none;'>
    <p style='font-size:20px;'><strong>Question $i </strong>: $quiz->Question </p>
    <br/><div style='margin-left:60px;font-size:14px;'>
    <input type='radio' name='op11' id='op1$i' value='1' style='opacity: 0;'>$quiz->op1<br/><br/>
    <input type='radio' name='op11' id='op2$i' value='2' style='opacity: 0;'>$quiz->op2<br/><br/>
    <input type='radio' name='op11' id='op3$i' value='3' style='opacity: 0;'>$quiz->op3<br/><br/>
    <input type='radio' name='op11' id='op4$i' value='4' style='opacity: 0;'>$quiz->op4<br/><br/></div>
    </li>";
    $i++;
}
?>
</ul>
<div class="span6">
<button id="next" class="btn btn-info btn-large" style="float:right;">Next &rarr; </button>
</div>
</div>

Now using jquery, when I click on next button then the value of selected answer is put into an array named as answers.

When the answer is selected then the array is being created corrected, but when I am not selecting any answers then the previous value is pushed into array.

For this purpose I am using following jquery function :

<script>
$(function(){
    var items = $('ul#part li');
    var answers = new Array();
    if(items.filter(':visible').length == 0)
    {
        items.first().show();
    }
    $('#next').click(function(e){
        //e.preventDefault();
        var active = items.filter(':visible:last');
        active.hide();
        var val = $("input:radio[name=op11]:checked").val();

        console.log(val)
        answers.push(val)
        var next = active.next();
        if (next.length)
             next.show();
        else{
            console.log(answers);
        }

    });
});
</script>

For example : I have three questions and I choose the answers 2,3,1 respectively then the array of answers is [2,3,1] that is correct but suppose I do not choose any answer of question no two, and the chosen answer of first and third question is 2,3 respectively then the created array according to my code is [2,2,3]. But I need that when I do not choose any answer then the value of that answer should be 0 means for above example the array should be [2,0,3]

How can I achieve it, please help me in correcting the code

Answer 1

Use id for radio buttons:

example:

if(document.getElementById('op1$i').checked) {
  //radio button is checked

Answer 2

You should check is the current answer is selected. Try something like:

if ($("input:radio[name=op11]:checked").length == 1) {
    //One item checked with that name
    var val = $("input:radio[name=op11]:checked").val();
} else { var val=0; }                //or handle the error some other way

Answer 3

var val = $("input:radio[name=op11]:checked").val();

if (typeof(val) !== "undefined" && val !== null){

    answers.push(val);

}else{
    answers.push(0);
}

You need to check it is not null or undefined. If it is (null or undefined) then add 0, otherwise add selected value.