loop using JavaScript based in html id

Question

if i have a table with an infinite which has an input type checkbox. Each check box is marked with an id eg. #det1, #det2 , #det3 how would i write my JS loop to check if that certain checkbox is checked to perform the function on it, without writing out each id ,because this id is also incremented based on the product uploader so for each product uploaded it will just add 1 to the id,at the end i could sit with allot of id's.

javascript that works adding the id manually:

 $('#details1, #details2').on('change', function(){
    var row = $(this).closest('tr').next('tr');
    if ($(this).prop('checked')) {
        $(row).show();
    }
    else {
        $(row).hide();
    }
 });

So that works but because have so many id's based on my tr's i would just like to do a loop and check if that id exist (it could be id = #details999) and if it does do function on.change.

(for each product ill upload the id adds 1 to it eg. product1 = #details1 , product2 = #details2, etc...)

There might be a better way of implementing the idea but as im newbie i am open to any suggestions.

What i tried:

  for (var i = 0; i < ?; i++) {
   $('#details'+ i).on('change', function(){
   var row = $(this).closest('tr').next('tr');
    if ($(this).prop('checked')) {
        $(row).show();
    }
    else {
        $(row).hide();
      }
     })
    }

i know ? means nothing but i realized i cant set a limit to that also don't want a infinite loop so i'm kind of stuck.

Gabriele Petrioli · Accepted Answer · 2017-09-30 09:50:49Z

1

Add a common class to the select elements and use that to target them

<input type="checkbox" id="details1" class="details-checkbox">
<input type="checkbox" id="details2" class="details-checkbox">
<input type="checkbox" id="details3" class="details-checkbox">

and then use

$('.details-checkbox').on('change', function(){
    var row = $(this).closest('tr').next('tr');
    if ($(this).prop('checked')) {
        $(row).show();
    }
    else {
        $(row).hide();
    }
 });

edited Sep 30, 2017 at 9:50

answered Sep 30, 2017 at 9:46

Gabriele Petrioli

197k35 gold badges275 silver badges331 bronze badges

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

2 Comments

Gabriele Petrioli Over a year ago

@Andreas oups :) fixed.

Ylama Over a year ago

ended up using this as it feels like the safer option.. thanks bro

Andreas · Accepted Answer · 2017-09-30 09:54:25Z

1

I would use event delegation:

Event delegation allows us to attach a single event listener, to a parent element, that will fire for all descendants matching a selector, whether those descendants exist now or are added in the future.

$('table').on('change', 'input[type="checkbox"]', function(e) {
  var row = $(this).closest('tr').next('tr');

  $(row).toggle($(this).prop('checked'));
})

tr.hidden { display: none }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr><td>1</td><td><input type="checkbox" /></td></tr>
    <tr class="hidden"><td colspan="2">Details 1</td></tr>
    <tr><td>2</td><td><input type="checkbox" /></td></tr>
    <tr class="hidden"><td colspan="2">Details 2</td></tr>
    <tr><td>3</td><td><input type="checkbox" /></td></tr>
    <tr class="hidden"><td colspan="2">Details 3</td></tr>
    <tr><td>4</td><td><input type="checkbox" /></td></tr>
    <tr class="hidden"><td colspan="2">Details 4</td></tr>
  </tbody>
</table>

edited Sep 30, 2017 at 9:54

answered Sep 30, 2017 at 9:51

Andreas

21.9k7 gold badges52 silver badges58 bronze badges

3 Comments

Gabriele Petrioli Over a year ago

It would be safer to add the [id^="details"] to the delegated selector to avoid misfires from other checkboxes.

Andreas Over a year ago

That would be a thing to consider (or better use a common class as suggested in your answer). But as this is just meant to provide a possible way and not a 100% bulletproof solution, I will leave this to the TO :)

Ylama Over a year ago

well this worked 100% as wanted it to, thanks so much @Andreas for explanation and solution, wil do bit more research on this function.

Osama · Accepted Answer · 2017-09-30 09:51:28Z

0

 $('input:checkbox[id*=details ]').on('change',function(){
 var row = $(this).closest('tr').next('tr');
 if ($(this).prop('checked')) {
    $(row).show();
 }
 else {
    $(row).hide();
    }
 });

answered Sep 30, 2017 at 9:51

Osama

3,0301 gold badge15 silver badges16 bronze badges

Collectives™ on Stack Overflow

loop using JavaScript based in html id

3 Answers 3

2 Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related