Javascript array not working as expected

Question

I'm pretty new to js/jquery. For each checkbox with the ID of check$ (where $ is a sequential number), I want to toggle the class "agree" of the surrounding span that uses the same check$ (but as a class). I don't want to have to hard-code the list of matching checkboxes, as this may vary.

Here's my code. This function works as expected:

agree = function (checkbox, span) {
    $(checkbox).change(function(){
       $(span).toggleClass('agree');
   });      
};

This is what I'm trying to pass to the above function, which does not work:

$(function() {
    var elemid = 'check',
    checks     = Array($('[id^='+elemid+']').length);
    console.log(checks);
  for (i=0; i < checks; i++) {
    agree('#'+elemid+checks[i], "."+elemid+checks[i]);
    }
});

console.log(checks) returns [undefined × 4]. The number of elements is correct, but I don't know why it's undefined, or whether that is even significant.

The following code works as expected, but as I say, I'd rather not have to specify every matched element:

$(function() {
    var checks = ["check1", "check2", "check3", "check4"];
    for (i=0; i < checks.length; i++) {
        agree('#'+checks[i], "."+checks[i]);
        }
});

Thanks.

Edit: Thanks to Jack, I was overlooking the most simple method. I added the same class to all checkboxes and spans, and solved the problem with this:

$('input.check').change(function(){
    $(this).closest('span.check').toggleClass('agree');
});

The question is not too clear. Your problem is not with "javascript arrays", but with the use of selectors to apply operations to related elements. Can you edit your question & title to clarify? — tucuxi
– tucuxi, Commented Jul 13, 2012 at 13:56

Jack · Accepted Answer · 2012-07-13 13:59:01Z

1

I might be totally missing something, but I'm pretty sure you are just trying to attach a change handler to each checkbox. In this case you can give them all the same class. I'm also guessing at your html structure for the span.

For reference:

http://api.jquery.com/closest/

http://docs.jquery.com/Tutorials:How_jQuery_Works

$('.yourcheckboxclass').change(function(){ //grab all elements with this class and attach this change handler
   $(this).closest('span').toggleClass('agree'); 
});

answered Jul 13, 2012 at 13:59

Jack

8,9413 gold badges23 silver badges27 bronze badges

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

1 Comment

mplungjan Over a year ago

Bart Riemens suggested: Had the same solution in mind, but instead of finding A parent span I added the id of the checkbox to make sure the span also has the same name as class $(this).closest("span." + this.getAttribute("id")).toggleClass('agree');

Guffa · Accepted Answer · 2012-07-13 14:10:19Z

0

The reason that the array is full of undefined values, is that you are just getting the number of items in the jQuery object, and create an array with that size. The jQuery object is discarded.

Put the jQuery object in the variable instead:

var elemid = 'check', checks = $('[id^='+elemid+']');

checks.each(function(){
  agree(this, "."+elemid+checks[i]);
});

answered Jul 13, 2012 at 14:10

Guffa

703k111 gold badges760 silver badges1k bronze badges

Collectives™ on Stack Overflow

Javascript array not working as expected

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related