JS：チェックボックスにチェック表示/非表示のテーブル行オンオン

Question

このwebsite私は、ユーザーが価格、部屋等...

てテーブルをフィルタリングすることができます上にいくつかのチェックボックスフィルタとコンテンツのテーブルを持っている（ワードプレスで構築されました）

チェックボックスに関連する次の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でのカップルのエラーを持っていない - 内のコードhttps://i.imgur.com/eJMPBz1.png

- あなたは、もはやラップと呼ばれるdiv要素を持っている、それはあなたのjsがここに失敗しますあなたの変更リスナーは正常に動作します - 私は彼らがちょうど登録されていないと信じています。変更してください：

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