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

Question

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 1

How about adding a CSS class to each link which has been clicked, then testing how many against how many there are in total?

$(function() {
    var $all = $("ul li a");
    $all.click(function() {
        $(this).addClass("clicked");
        if($(".clicked").length === $all.length) {
           $(".submit").show();
        }
    });
});

Answer 2

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

Answer 3

You can do this -

$('ul li a').on('click', function (e) {
    e.preventDefault();
    $(this).addClass('clicked');
    if ($('.clicked').length === $('ul li a').length) {
        $('.submit').show();
    }
});

Demo ---> http://jsfiddle.net/ddreL/5/

Answer 4

Try this one,

$(function(){
    var count = 0;
    $('a').on("click",function(){
        if(!$(this).hasClass('dummy')){
          $(this).addClass("dummy");
          count++;
        }
    });

    function submitFn(){
      var alen = $('a').length;
        if(count == alen) {
          //submit form
        }
        else{
          //throw message
        }
    }
})

Jquery