JS：关于复选框选中隐藏/显示表格行

关于此website（使用Wordpress构建）我有一个内容列表，其中有一些复选框过滤器，允许用户通过价格，房间等筛选表格...JS：关于复选框选中隐藏/显示表格行

与复选框相关的以下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>

就如何解决它的任何建议？

非常感谢您的帮助

来源

2017-06-01 DaemonOh

首先，你在你的JS有一对夫妇的错误 - 你不再有一个div叫包好，并导致你的JS在这里失败 - 内https://i.imgur.com/eJMPBz1.png

代码你的改变监听者工作正常 - 我相信他们只是没有得到注册。尝试将其更改为：

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

来源

2017-06-01 12:07:54 JonLuca

JS：关于复选框选中隐藏/显示表格行

回答

相关问题