Question

I have two questions per div (page) that look like this:

<div id="page5" class="page" style="display:none;">
                    <div class="question">
                        <h3>9. You are trying to remember a pin number, what are you most likely?</h3>
                        <ul class="abc Clearfix">
                            <li>
                                <span>
                                    <a class="a" href="javascript:void(false);">
                                        <span class="letter">A</span>
                                        <span class="image"></span>
                                        <span class="title">Imagine the numbers in your head</span>
                                    </a>
                                </span>
                            </li>
                            <li>
                                <span>
                                    <a class="b" href="javascript:void(false);">
                                        <span class="letter">B</span>
                                        <span class="image"></span>
                                        <span class="title">Repeat the numbers out loud</span>
                                    </a>
                                </span>
                            </li>
                            <li>
                                <span>
                                    <a class="c" href="javascript:void(false);">
                                        <span class="letter">C</span>
                                        <span class="image"></span>
                                        <span class="title">Try out the pattern of the numbers on a keypad</span>
                                    </a>
                                </span>
                            </li>
                        </ul>
                    </div>
                    <div class="question">
                        <h3>10. How would you tell if a friend was upset?</h3>
                        <ul class="abc Clearfix">
                            <li>
                                <span>
                                    <a class="a" href="javascript:void(false);">
                                        <span class="letter">A</span>
                                        <span class="image"></span>
                                        <span class="title">Notice the expression on their face</span>
                                    </a>
                                </span>
                            </li>
                            <li>
                                <span>
                                    <a class="b" href="javascript:void(false);">
                                        <span class="letter">B</span>
                                        <span class="image"></span>
                                        <span class="title">Listen to what they say</span>
                                    </a>
                                </span>
                            </li>
                            <li>
                                <span>
                                    <a class="c" href="javascript:void(false);">
                                        <span class="letter">C</span>
                                        <span class="image"></span>
                                        <span class="title">Pick up on their body language</span>
                                    </a>
                                </span>
                            </li>
                        </ul>
                    </div>
                </div>

I have some jQuery code that allows the user to select a link per question (they can ONLY choose one per question). Their are a total of 5 pages that the user can navigate across using a next and previous set of links. What I want to do is check that a div with the class of page has two classes of selected on its links, otherwise show an alert when the user tries to click a button.

The code to do the selects on the options.

$(".abc li a").click(function ()
{
    var selected = $(this).hasClass('selected');
    $(this).closest('ul.abc').find('li a').removeClass('selected');
    if (!selected)
        $(this).addClass('selected');
});

The navigation buttons used to jump between pages:

<div class="page-navigation Clearfix">
                                <a id="quiz-prev" class="Prev" href="javascript:void(false);" style="display:none;">
                                    <span>Prev</span>
                                </a>
                                <a id="quiz-next" class="Next" href="javascript:void(false);">
                                    <span>Next</span>
                                </a>
                                <a id="quiz-finish" class="Finish" href="javascript:void(false);" style="display:none;">
                                    <span>Finish</span>
                                </a>
                            </div>

and the code for the next button:

   $("#quiz-next").click(function () {
        $(".page:visible").hide().next().show();
    });

So if a user was on page1 and had only clicked one option ie. only one link had a class of selected then when they clicked the next link it would show an alert saying ‘Please fill out all questions’. Note: I have already added code to hide and show the buttons based on what page they are looking at so don’t need to do that

Also when the user reaches the last page, a finish button appears so it needs to check the user has selected 10 options, so need to either count the classes or something similar. Cheers again for all who can help.

Can anyone help? Thanks.

EDIT: Here is my attempt to show an alert if two options have not been clicked. But it shows the alert all the time

$('#quiz-next').click(function ()
{
    var allOK = true;
    $('div.page > div.question').each(function () {
        allOK = allOK && $('a.selected', this).length == 1;
        return allOK;
    });

    if (allOK == false)
    {
        alert("Please fill in all questions");
    }
    else {
        $(".page:visible").hide().next().show();
    }
});

Answer 1

So, basically what you need to do is this:

In a <div class="page">, you have several <div class="question">. On a triggered event, you want to make sure that each question div has exactly one <a class="selected"> before proceeding.

The following code should be able to do that:

var allOK = true;
$('div.page > div.question').each(function() {
    allOK = allOK && $('a.selected', this).length == 1;
    return allOK; // if false, we don't need to check the rest
});

After running this code, allOK tells you if you’re good to go or not.
It seems to work, at least =) (You’ll have to put the select classes there manually…)

Note: this will check for all <div class="page"> that are currently rendered (which seems to be what you want for the last page). To just check a single div at a time, you’ll have to change the div.page selector to something uniquely identifying that specific div – with your sample code, you could for example use #page5 instead.