JS: On checkbox checked hide/show table row

Question

On this website (Built with Wordpress) I have a table of content with some checkboxes filters on top that allows users to filter the table by price, rooms etc...

The following JS script, related to the checkboxes, is not working properly anymore. (I just post a small part because is the same for the different checkboxes).

<script>

$(document.body).on('change', "#checkboxID", function() { 
$("#tableID tr.rowEG").toggle(!this.checked); 
});

$(document.body).on('change', "#checkbox1OG", function() { 
$("#tableID tr.row1OG").toggle(!this.checked); 
});

$(document.body).on('change', "#checkbox2OG", function() { 
$("#tableID tr.row2OG").toggle(!this.checked); 
});

$(document.body).on('change', "#checkbox3OG", function() { 
$("#tableID tr.row3OG").toggle(!this.checked); 
});

</script>

This is part of the HTML related to the table of content:

<div class="tabelle" id="wrap">
 <table class="table" id="tableID">
  <thead>
   <tr>
    <th>Wohnung
    Apartment</th>
    <th>Zimmer
     Rooms</th>
    <th>Stockwerk
    Floor</th>
    <th>Haus Nr.
    House No.</th>
   <th>Nettomiete
    Net Rent</th>
    <th>Bruttomiete
    Gross Rent</th>
    <th>PDF</th>
    </tr>
  </thead>
 <tbody>
   <tr class="row1 row1OG row2OG row3OG zimmer3 zimmer2 zimmer5 range1 
range2 range3 range5 haus2 haus3 haus4 haus5 haus6 haus7 haus8 haus9 haus10 
haus11 haus12 haus14 special1">
   <td>1.0.1</td>
   <td>4.5</td>
   <td>EG</td>
   <td>1</td>
   <td>2120</td>
   <td><span style="color: #ff0000;">vermietet</span></td>
   <td><a target="_blank" href="/table/pdf/Haus_1/1.0.1.pdf" rel="noopener 
noreferrer"><img alt="" src="/img/pdf.png" /></a></td>
   </tr>
</tbody>
</table>
</div>

Any suggestion on how to fix it?

Thanks a lot for your help

Answer 1

First you have a couple errors in your js - you no longer have a div called wrap, and that causes your js to fail here - https://i.imgur.com/eJMPBz1.png

The code within your change listener works fine - I believe they are just not getting registered. Try changing it to:

$("#checkbox2OG").change(function() {
    $("#tableID tr.row2OG").toggle(!this.checked); 
});