JS：在復選框上選中隱藏/顯示表格行

Question

在這個網站上 （裝有Wordpress），我有一個目錄表，上面有一些復選框過濾器，允許用戶按價格，房間等過濾表...

以下與復選框相關的JS腳本無法正常工作。 （我只發布一小部分，因為不同的復選框是相同的）。

<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>

這是與目錄有關的HTML的一部分：

<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>

關於如何解決它的任何建議？

非常感謝你的幫助

Answer 1

首先，您的js中有幾個錯誤-您不再有一個稱為wrap的div，這將導致js在此處失敗-https: //i.imgur.com/eJMPBz1.png

您的更改偵聽器中的代碼可以正常工作-我相信它們只是沒有被注冊。 嘗試將其更改為：

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