How to check if at least one radio button is checked in this function?

Question

I'm making a quiz with PHP, but I am using JavaScript to go between the questions first and then I submit the form and let PHP do the rest.

I made two JavaScript functions called ChangeQuestion() and BackQuestion() .

function ChangeQuestion(prev, next) {
    $('#' + prev).fadeOut(600, function() {
        $('#' + next).fadeIn(600);
    });
}

function BackQuestion(last, prev) {
    $('#' + prev).fadeOut(600, function() {
        $('#' + last).fadeIn(600);
    });
}

They're pretty basic. But what I would like to do is check if their is at least one radio button checked in a question before continuing with the function. You'll be able to see in my markup/HTML how I'm using the above functions.

First of all, here's a jsFiddle: http://jsfiddle.net/3XdUA/

Here's my markup:

<form id="quiz1" name="quiz1" method="post" action="<?php echo $_SERVER['REQUEST_URI']; ?>">
    <div id="starter">
        Hello! Welcome to the HTML Quiz powered by PHP. Click on Start to begin.
        <br /><br />
        <button type="button" onclick="ChangeQuestion('starter','question1');$('#qIndicator').fadeIn(800);">Start &raquo;</button>
    </div>
    <div id="question1" style="display:none;">
        1. What does HTML stand for?
        <br />
        <br />
        <input type="radio" name="q1" id="q1-a1" /> 
        <label for="q1-a1">Hyperlinks and Text Markup Language</label>
        <br />
        <input type="radio" name="q1" id="q1-a2" /> 
        <label for="q1-a2">Home Text Markup Language</label>
        <br />
        <input type="radio" name="q1" id="q1-a3" /> 
        <label for="q1-a3">Hyper Text Markup Language</label>
        <br />
        <input type="radio" name="q1" id="q1-a4" /> 
        <label for="q1-a4">Hyper Text Marking Language</label>
        <br /><br />
        <button type="button" onclick="ChangeQuestion('question1','question2');$('#qIndicator').html('Question 2 of 10');">Next &raquo;</button>
    </div>

    <div id="question2" style="display:none;">
        2. What is the proper way to add a blue background to the <code>&lt;body></code> and remove the margin &amp; padding?
        <br />
        <br />
        <input type="radio" name="q2" id="q2-a1" /> 
        <label for="q2-a1">&lt;body backgroundColor="blue" padding="0" margin="0"&gt;</label>
        <br />
        <input type="radio" name="q2" id="q2-a2" /> 
        <label for="q2-a2">&lt;body style="background-color: blue; margin: 0; padding: 0;"&gt;</label>
        <br />
        <input type="radio" name="q2" id="q2-a3" /> 
        <label for="q2-a3">&lt;body style="backgroundColor: blue; margin: 0px; padding: 0px;"&gt;</label>
        <br />
        <input type="radio" name="q2" id="q2-a4" /> 
        <label for="q2-a4">&lt;body background="blue" padding="0" margins="0"&gt;</label>
        <br /><br />
        <button type="button" onclick="BackQuestion('question1','question2');$('#qIndicator').html('Question 1 of 10');">&laquo; Back</button>
        <button type="button" onclick="ChangeQuestion('question2','question3');$('#qIndicator').html('Question 3 of 10');">Next &raquo;</button>
    </div>

    <div id="question3" style="display:none;">
        3. Which of the following font styling tags isn&#39;t valid?
        <br />
        <br />
        <input type="radio" name="q3" id="q3-a1" /> 
        <label for="q3-a1">&lt;small&gt;</label>
        <br />
        <input type="radio" name="q3" id="q3-a2" /> 
        <label for="q3-a2">&lt;strong&gt;</label>
        <br />
        <input type="radio" name="q3" id="q3-a3" /> 
        <label for="q3-a3">&lt;em&gt;</label>
        <br />
        <input type="radio" name="q3" id="q3-a4" /> 
        <label for="q3-a4">&lt;large&gt;</label>
        <br /><br />
        <button type="button" onclick="BackQuestion('question2','question3');$('#qIndicator').html('Question 2 of 10');">&laquo; Back</button>
        <button type="button" onclick="ChangeQuestion('question3','question4');$('#qIndicator').html('Question 4 of 10');">Next &raquo;</button>
    </div>

    <div id="question4" style="display:none;">
        4. Suppose you have this HTML on your page:
        <br /><br />
        <code>
            &lt;a name="target4"&gt;Old listing&lt;/a&gt;
        </code>
        <br /><br />
        How would you link to the above target?
            <br />
            <br />
            <input type="radio" name="q4" id="q4-a1" /> 
            <label for="q1-a1">&lt;a url="#target4"&gt;Check Old Listing as well&lt;/a&gt; </label>
            <br />
            <input type="radio" name="q4" id="q4-a2" /> 
            <label for="q1-a2">&lt;a href="#target4"&gt;Check Old Listing as well&lt;/a&gt;</label>
            <br />
            <input type="radio" name="q4" id="q4-a3" /> 
            <label for="q1-a3">&lt;link url="target4"&gt;Check Old Listing as well&lt;/link&gt; </label>
            <br />
            <input type="radio" name="q4" id="q4-a4" /> 
            <label for="q1-a4">&lt;a href="Listing.target4"&gt;Check Old Listing as well&lt;/a&gt;</label>
            <br /><br />
            <button type="button" onclick="BackQuestion('question3','question4');$('#qIndicator').html('Question 3 of 10');">&laquo; Back</button>
            <button type="button" onclick="ChangeQuestion('question4','question5');$('#qIndicator').html('Question 5 of 10');">Next &raquo;</button>
        </div>

            <div id="question5" style="display:none;">
                5. What does HTML stand for?
                <br />
                <br />
                <input type="radio" name="q2" id="q2-a1" /> 
                <label for="q1-a1">Hyper Tool Markup Language</label>
                <br />
                <input type="radio" name="q2" id="q2-a2" /> 
                <label for="q1-a2">Home Text Markup Language</label>
                <br />
                <input type="radio" name="q2" id="q2-a3" /> 
                <label for="q1-a3">Hyper Text Markup Language</label>
                <br />
                <input type="radio" name="q2" id="q2-a4" /> 
                <label for="q1-a4">Hyper Text Marking Language</label>
                <br /><br />
                <button type="button" onclick="BackQuestion('question4','question5');$('#qIndicator').html('Question 4 of 10');">&laquo; Back</button>
                <button type="button" onclick="ChangeQuestion('question5','question6');$('#qIndicator').html('Question 6 of 10');">Next &raquo;</button>
            </div>

            <div id="question6" style="display:none;">
                6. What does HTML stand for?
                <br />
                <br />
                <input type="radio" name="q2" id="q2-a1" /> 
                <label for="q1-a1">Hyper Tool Markup Language</label>
                <br />
                <input type="radio" name="q2" id="q2-a2" /> 
                <label for="q1-a2">Home Text Markup Language</label>
                <br />
                <input type="radio" name="q2" id="q2-a3" /> 
                <label for="q1-a3">Hyper Text Markup Language</label>
                <br />
                <input type="radio" name="q2" id="q2-a4" /> 
                <label for="q1-a4">Hyper Text Marking Language</label>
                <br /><br />
                <button type="button" onclick="BackQuestion('question5','question6');$('#qIndicator').html('Question 5 of 10');">&laquo; Back</button>
                <button type="button" onclick="ChangeQuestion('question6','question7');$('#qIndicator').html('Question 7 of 10');">Next &raquo;</button>
            </div>

        </form>

Yes, it is long. Sorry about that. But, I provided a jsFiddle which would be much easier to understand. (because of the preview, etc.)

I do know how to check if a radio is selected, but I do not know how to make sure that one is selected with this function .

Answer 1

use :radio:checked

function ChangeQuestion(prev, next) {
    var current = $('#' + prev);
    var selection = current.find(":radio:checked").attr("id");
    if (selection) {
        alert(selection);
    }
    current.fadeOut(600, function() {
        $('#' + next).fadeIn(600);
    });
}

an alternative to my update would be

function ChangeQuestion(prev, next) {
    var current = $('#' + prev);
    if (prev != "starter") {
        var selection = current.find(":radio:checked").attr("id");
        if (selection === undefined) {
            alert("no selection");
        } else {
            alert(selection);
            current.fadeOut(600, function() {
                $('#' + next).fadeIn(600);
            });
        }
    } else {
        current.fadeOut(600, function() {
            $('#' + next).fadeIn(600);
        });
    }
}

I just didn't like repeating

    current.fadeOut(600, function() {
        $('#' + next).fadeIn(600);
    });

see here

Answer 2

Use the :checked pseudo selector.

function ChangeQuestion(prev, next) {
    var prevQ = $('#'+prev);
    var numChecked = prevQ.find('input[type=radio]:checked').length;

    if( prev !=='starter' && numChecked == 0 ) {
        // no radio checked in this question
        return;
    }

    prevQ.fadeOut(600, function() {
        $('#' + next).fadeIn(600);
    });
}

Answer 3

You can also use $("[name=q1]").is(":checked") just to check if something is selected. Of course, substitute q1 with whichever question you are on. In your case it looks like you'll be using q1 , q2 , etc.