How to check if at least one radio button is checked in this function?
<p>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.</p>

<p>I made two JavaScript functions called <code>ChangeQuestion()</code> and <code>BackQuestion()</code>.</p>

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

function BackQuestion(last, prev) {
    $('#' + prev).fadeOut(600, function() {
        $('#' + last).fadeIn(600);
    });
}
</code></pre>

<p>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.</p>

<p>First of all, here's a jsFiddle: <a href="http://jsfiddle.net/3XdUA/" rel="nofollow">http://jsfiddle.net/3XdUA/</a></p>

<p>Here's my markup: </p>

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

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

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

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

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

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

        &lt;/form&gt;
</code></pre>

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

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