Toggle a attribute with id 'user'+i with a checkbox with id 'checkbox'+i

Question

first thanks for your help in advance. I'm pretty newbie in jquery and javascript and I don't speak so much english so i cound't found nothing liked in my research.

This is my html

<li></li>
<li></li>
<li id="user1"></li>
<input type="checkbox" id="checkbox1">

<li></li>
<li></li>
<li id="user2"></li>
<input type="checkbox" id="checkbox2">

I want to everytime that a checkbox with id ("checkbox"+i) is checked I toggle a class in the ("user"+i) to push in a list and then send with post request.

I tryed this

for(i = 1; i < 3; i++) {    
   document.getElementById('checkbox' + i).addEventListener('change', function() {
        document.getElementById('user' + i).setAttribute("class", "passInterestIds");
  });
}

but it only gives me user3 independent of the checkbox

How can I Make this work?

Possible duplicate of [JavaScript closure inside loops – simple practical example](http://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example) — ibrahim mahrir, Apr 28 '17 at 20:43
I tried some function outside but It still gave me user3, somethimes they got undefined, thanks for the help, gonna read a bit more — Luiz Fernando Lobo, Apr 28 '17 at 21:10
It's because you have a global `i` try and do `for(var i = 0; ...` instead of `for(i = 0; ...`. — ibrahim mahrir, Apr 28 '17 at 21:13
And my personal favorite answer from the duplicate link is this one: http://stackoverflow.com/a/19324832/6647153! — ibrahim mahrir, Apr 28 '17 at 21:15
i tried to create function user(j) {return('user'+j)}and executed when with function(){user(i)} but still didn't work. — Luiz Fernando Lobo, Apr 28 '17 at 21:25
Thanks gonna read a little more about see what's the problem. — Luiz Fernando Lobo, Apr 28 '17 at 21:30

caramba · Accepted Answer · 2017-04-28T21:23:11.237

So this will always work as long as the id contains ONE digit cause that what we're taking from the match function. Then if checkbox gets checked add class hello else remove class hello

var elements = $('input[type^=checkbox');
elements.on('click', function(){
  var idNr = $(this).attr('id').match(/\d+/)[0];
  if($(this).is(':checked')) {
    $('#user' + idNr).addClass('hello');
  } else {
    $('#user' + idNr).removeClass('hello');
  }
});

.hello {
  background-color: orange;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<li id="user1"></li>
<input type="checkbox" id="checkbox1">

<li id="user2"></li>
<input type="checkbox" id="checkbox2">

If possible to change the HTML.. The better way would be to use the value attribute from the input element containing the number. Or use a data-user-id attribute if you can not use the value attribute.

var elements = $('input[type^=checkbox');
elements.on('click', function(){
  var idNr = $(this).val();
  if($(this).is(':checked')) {
    $('#user' + idNr).addClass('hello');
  } else {
    $('#user' + idNr).removeClass('hello');
  }
});

.hello {
  background-color: orange;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<li id="user1"></li>
<input type="checkbox" id="checkbox1" value="1">

<li id="user2"></li>
<input type="checkbox" id="checkbox2"  value="2">

Thanks a lot it worked and the most important I understood, didn't know that you how to use regexp with javascript it's gonna help me a lot with this project. — Luiz Fernando Lobo, Apr 28 '17 at 21:11
Sorry don't have enough reputation, but thanks for your help. — Luiz Fernando Lobo, Apr 28 '17 at 21:30
@LuizFernandoLobo you do not need any reputation to mark as accepted .. https://meta.stackexchange.com/questions/5234/how-does-accepting-an-answer-work — caramba, Apr 29 '17 at 06:38

Toggle a attribute with id 'user'+i with a checkbox with id 'checkbox'+i

1 Answers1