big_smile big_smile - 1 month ago 10
Javascript Question

Jquery: Check if all links in a list have been clicked on

I am making an avatar creator. The user has a list of links that they have to click on to customize the avatar options.

Under the list, is a submit button. I only want the submit button to appear when the user clicks on all the links (It is a responsive design, so this will only happen on Mobile).

How can I use Jquery to check if all the links have been clicked on then apply an "active" class to the wrapper to make the submit button appear.

NB: The links are part of a content slider, so they don't link to an external page (clicking on the links hide/shows the content on the current page).

<div class="wrapper not-active">

<ul>
<li><a href="#">HairColour</a></li>
<li><a href="#">EyeColour</a></li>
<li><a href="#">SkinColour</a></li>
<li><a href="#">HairStyle</a></li>
</ul>


<a href="#" class="submit">SUMBIT CHOICES</a>

</div>


I have a JSFIDDLE Here, but I have not add any Jquery code, because I am not sure which function to use to check if all links have been clicked. (I have omitted the code for the content slider to keep things clear).

Answer
$('.wrapper li a').click(function () {
    $(this).addClass('active');
    if ($('.wrapper li a.active').length == $('.wrapper li a').length) {
        $('.wrapper').removeClass('not-active').addClass('active');
    }
});