基于JavaScript/jQuery实现表格复选框筛选功能的问题咨询

问题描述 #

我有四个复选框用于筛选表格的四类数据，对应的HTML代码如下：

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

期望实现的行为：

• 未勾选任何复选框时，显示所有表格数据
• 勾选任意复选框时，隐藏未勾选类别对应的表格行

目前已编写了以下代码，但不知道如何找到并隐藏对应的表格行：

$('#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();
    };
});

解决方案 #

可以简化逻辑，先获取所有被选中的复选框的值，再根据这些值控制表格行的显示隐藏，比处理未选中元素更直观：

$('#music_filter, #video_filter, #writing_filter, #games_filter').on('click', function() {
    // 提取所有选中复选框的value，转为数组
    const checkedValues = $('input[type=checkbox]:checked').map(function() {
        return this.value;
    }).get();

    if (checkedValues.length === 0) {
        // 无选中项时显示所有行
        $('table tr').show();
    } else {
        // 先隐藏所有行，再显示选中类别对应的行
        $('table tr').hide();
        checkedValues.forEach(val => {
            $(`table tr.${val}`).show();
        });
    }
});

代码说明 #

• 获取选中值：用map()遍历选中的复选框，提取value属性，get()将jQuery对象转为普通数组。
• 无选中处理：数组为空时，直接显示所有表格行。
• 有选中处理：先统一隐藏所有行，再遍历选中值数组，逐个显示对应类别的行。

这种写法逻辑更清晰，也避免了原代码中遍历jQuery对象可能遇到的非DOM元素问题。

内容的提问来源于stack exchange，提问作者postcardfiction