jQuery, associative array and binding events

Question

I would like to bind the same event to 3 checkboxes but with a different target each time:

  var checkboxes = {
    'selector1' : 'target1',
    'selector2' : 'target2',
    'selector3' : 'target3',
  };

  for (selector in checkboxes) {
    var target = checkboxes[selector];

    if (jQuery(selector).is(':checked')) {
      jQuery(target).show();
    }
    else {
      jQuery(target).hide();
    }

    jQuery(selector).bind('change', function() {
      if ($(this).is(':checked')) {
        jQuery(target).show();
      }
      else {
        jQuery(target).hide();
      }
    });
  };

But it doesn't work: on "change", the 3 selectors show/hide the 3rd target.

That construct {'key': 'value'...} is called an Object Literal in JavaScript, not an associative array. — Michael Berkowski
– Michael Berkowski, Commented Jan 31, 2012 at 14:21
@Michael: Well, the syntax is called an object literal. The code creates an object, which is an associative array. — Guffa
– Guffa, Commented Jan 31, 2012 at 14:24

Guffa · Accepted Answer · 2012-01-31 14:28:43Z

3

That's because the code in the event handler will use the variable target, not the value of the variable as it was when the event handler was created. When the event hander runs, the variable will contain the last value used in the loop.

Use an anonymous function to create a closure, that captures the value of the variable:

for (selector in checkboxes) {
  var target = checkboxes[selector];

  if (jQuery(selector).is(':checked')) {
    jQuery(target).show();
  } else {
    jQuery(target).hide();
  }

  (function(target){

    jQuery(selector).bind('change', function() {
      if ($(this).is(':checked')) {
        jQuery(target).show();
      } else {
        jQuery(target).hide();
      }
    });

  })(target);

};

Side note: You can use the toggle method to make the code simpler:

for (selector in checkboxes) {
  var target = checkboxes[selector];

  jQuery(target).toggle(jQuery(selector).is(':checked'));

  (function(target){

    jQuery(selector).bind('change', function() {
      jQuery(target).toggle($(this).is(':checked'));
    });

  })(target);

};

edited Jan 31, 2012 at 14:28

answered Jan 31, 2012 at 14:22

Guffa

703k111 gold badges760 silver badges1k bronze badges

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

1 Comment

plegall Over a year ago

Thank you very much, it works nice (and thanks for the toggle too)

John Strickler · Accepted Answer · 2012-01-31 14:24:02Z

2

It doesn't work because target isn't scoped inside of a function. Blocks DO NOT provide scope in javascript.

But I've reduced it down for you and hopefully this will work out:

$.each(checkboxes, function(selector, target) {
   $(selector).change(function () {
       $(target).toggle($(selector).is(':checked'));
   }).trigger('change');
});

answered Jan 31, 2012 at 14:24

John Strickler

25.4k5 gold badges55 silver badges70 bronze badges

1 Comment

Guffa Over a year ago

Provided of course that there is no other code that uses the change event on those elements, as you trigger the event when there is no change.

sinsedrix · Accepted Answer · 2012-01-31 15:06:55Z

0

target scope is the problem !

You could have simpler code:

use data for the handler

use .toggle(condition)

$.each(checkboxes, function(selector, target) {
    $(selector).on('change', {target:target}, function (evt) {
        $(evt.data.target).toggle($(this).is(':checked'));
    }).change();
});

answered Jan 31, 2012 at 15:06

sinsedrix

4,8055 gold badges38 silver badges66 bronze badges

1 Comment

Guffa Over a year ago

Provided of course that there is no other code that uses the change event on those elements, as you trigger the event when there is no change.

Collectives™ on Stack Overflow

jQuery, associative array and binding events

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related