Question

i have looked everywhere(but maybe i’ve missed something)

I’m currently creating a website where people have 3 options.

Let’s do it easy, 1,2 and 3.

Now the customer wants a technique that after you clicked the third checkbox(doesn’t matter in which way, you can go from 1 to 3 and then 2, or 3,1 and then 2) a alert popup comes up.

Now i have looked everywhere but i can’t find it.
Hopefully someone inhere could help me.

Thanx already.

Answer 1

This should work, I think:

$('input:checkbox').change(
    function(){
        if ($('input:checkbox:checked').length == $('input:checkbox').length){
            alert('All checkboxes are checked!');
        }
    });

JS Fiddle demo.

---

Edited in response to mblase75’s (accurate) comment (below):

Of course this won’t work if there are ANY other checkboxes on the page, but that can easily be solved by adding a class to the three checkboxes being monitored and selecting that instead.

The above can be easily adapted to apply to the children of a single element, regardless of how many of those elements are on the page:

$('input:checkbox').change(

function() {
    var $formElement = $(this).closest('form');
    if($formElement.find('input:checkbox:checked').length == $formElement.find('input:checkbox').length) {
        alert('All checkboxes are checked!');
    }
});

JS Fiddle demo.

Amending the $formElement = $(this).closest('form'); variable assignment to select another element, div, fieldset or, well, any other element, would allow you to target only those checkboxes within that given element.

References:

• :checkbox selector
• change()
• :checked selector
• length
• closest()
• find()