我有四个复选框来筛选四类表数据。
<input type="checkbox" value="audio" id="music_filter">
<input type="checkbox" value="video" id="video_filter">
<input type="checkbox" value="writing" id="writing_filter">
<input type="checkbox" value="game" id="games_filter">
<table>
<tr class="audio"> <td>some data</td> </tr>
<tr class="video"> <td>some data</td> </tr>
<tr class="writing"> <td>some data</td> </tr>
<tr class="game"> <td>some data</td> </tr>
</table>字符串
期望行为：
1.如果未选中任何框，则显示所有表数据
1.如果选中了任何复选框，则隐藏所有未选中的复选框
到目前为止，我已经做到了这一点，但是我如何找到并隐藏正确的表行呢？
$('#music_filter, #video_filter, #writing_filter, #games_filter').on('click',function(){
var unCheckedlength = $("input[type=checkbox]:not(:checked)").length;
if (unCheckedlength < 4) {
var notchecked = $("input[type=checkbox]:not(:checked)")
for (box in notchecked) {
// Needed code to hide unwanted table rows
}
} else {
$('.audio, .writing, .game, .video').show();
};
});型
2条答案
按热度按时间ccrfmcuu1#
字符串
每次单击输入时，这将获得选中的复选框ID列表。然后它将隐藏不在该列表中的所有行。
2w3rbyxf2#
你的方向是对的。要实现基于选定复选框显示和隐藏表行的所需行为，可以使用以下方法：
个字符
说明：
1.我们使用
$("input[type=checkbox]:checked")来查找所有选中的复选框。1.如果选中了任何复选框，我们将使用
map()和get()将它们的值（类别）收集到数组中。1.我们最初使用
$('tr').hide()隐藏所有表行。1.对于每个选定的类别，我们使用
$('.' + category).show()来显示属于该类别（类）的表行。1.如果没有选中任何复选框，则使用
$('tr').show()显示所有表数据。此代码将确保只显示与所选类别相对应的表行，其余行将被隐藏。如果未选中任何复选框，则将显示所有表数据。