Loop through HTML checkboxes using jQuery

Question

I am trying to write with jQuery something that does the following.

When you click, let's say, on a paragraph, it checks to see if the checkbok is selected (checked), if it waits x amount amount of time and selects the next check box and so on.

The closest I got (not much, sorry) you can see it here.

In this example you have to click once for each check, I dont want this.

I need that when you click the <p> it:

Checks,
Changes,
Checks,
Changes(and so on)

If it is possible to loop through this, even better.

Thanks a lot in advance, I hope it is clear enough, if not, please ask!

EDIT: as @James said basically what I want is want is to

continuously loop through the checkboxes checking and unchecking them

No, it should be triggered by a click, but the a timer between each new "check if checkbox is checked", is this clear? thanks for the question. — Trufa
– Trufa, Commented Nov 25, 2010 at 22:13

James Kovacs · Accepted Answer · 2010-11-25 22:53:46Z

2

Do you mean something like this?

$('p').click(function() {
    $(':checkbox').each(function(i) {
        var current = $(this);
        setTimeout(function() { current.attr('checked', !current.attr('checked'))}, i*500);
    });
});

Updated jsFiddle here: http://www.jsfiddle.net/jXHTJ/2/

UPDATE: To change the order on every click (as requested in the comments) so that the checkboxes are checked/unchecked in the order {1,2,3} then {2,3,1} then {3,1,2}, you can use the following code:

(function() {
    var startWith = 0;
    $('p').click(function() {
        var checkboxes = $(':checkbox');
        var numCheckboxes = checkboxes.length;
        checkboxes.each(function(i) {
            var current = $(this);
            var delay = (i + startWith) % numCheckboxes;
            setTimeout(function() { current.attr('checked', !current.attr('checked'))}, delay*500);
        });
        startWith = ++startWith % numCheckboxes;
    });
})();

Note that I'm encapsulating the code in an anonymous function that I immediately execute so that I don't pollute the global namespace with the startWith variable. Updated jsFiddle is here: http://www.jsfiddle.net/jXHTJ/3/

edited Nov 25, 2010 at 22:53

answered Nov 25, 2010 at 22:19

James Kovacs

11.7k42 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Trufa Over a year ago

That look quite good!! I´ll see if I can adapt it to my actual code, thank you very much!

Trufa Over a year ago

@James thank you very much, but can you thing of a way to make it loop like 1, 2 ,3 ,1 ,2 3.. etc? I cant get around this, thanks!!

Trufa Over a year ago

James, thank you so much and I dont want to bother you any more, you've guided me more that enough, but what I actually ment was only one paragrapgh clickable that when you click it it goes through the check boxes like this: unselect first, select second, unselect second, select third, unselect third, select first and the cycle starts again... I really appreciate it!

James Kovacs Over a year ago

So you want to continuously loop through the checkboxes checking and unchecking them? If so, you can use setInterval() rather than setTimeout().

Trufa Over a year ago

Oh, thats interesting I'll give it a try!

|

Collectives™ on Stack Overflow

Loop through HTML checkboxes using jQuery

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related