基于jQuery的复选框筛选：需匹配全部选中类别

你当前的代码实现的是**“或逻辑”筛选**——只要元素包含任意一个选中的类别就会显示，但你需要的是**“且逻辑”筛选**（元素必须同时包含所有选中的类别才能显示）。咱们来修正这个逻辑：

修正后的核心代码 #

$("#filters :checkbox").click(function() {
    // 提取所有选中的筛选值，转为数组
    const selectedFilters = $("#filters :checkbox:checked").map(function() {
        return $(this).val();
    }).get();

    if (selectedFilters.length === 0) {
        // 无选中项时，显示所有结果
        $(".result-box").show();
    } else {
        // 生成同时包含所有选中类的精准选择器，比如 .result-box.a.b
        const selector = ".result-box" + selectedFilters.map(cls => "." + cls).join("");
        // 先隐藏全部结果，再展示符合条件的元素
        $(".result-box").hide();
        $(selector).show();
    }
});

代码工作原理 #

• map().get() 会把所有选中复选框的value值提取成一个数组，比如选中A和B时，数组为["a", "b"]
• 当没有选中任何复选框时，直接显示所有.result-box元素
• 当有选中项时，把数组转换为.a.b这样的字符串，和.result-box拼接成.result-box.a.b——这个选择器只会匹配同时拥有a和b类的元素
• 先隐藏所有结果，再精准显示符合条件的元素，完美实现你要的“必须包含所有选中类别”的需求

完整可运行代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="filter-checkboxes">
    <ul id="filters">
        <li>
            <input class="filterOption" type="checkbox" value="a" id="filter-a" />
            <label for="filter-a">Category A</label>
        </li>
        <li>
            <input class="filterOption" type="checkbox" value="b" id="filter-b" />
            <label for="filter-b">Category B</label>
        </li>
        <li>
            <input class="filterOption" type="checkbox" value="c" id="filter-c" />
            <label for="filter-c">Category C</label>
        </li>
    </ul>
</div>
<div class="result-area">
    <div class="result-box a b" >a b </div>
    <div class="result-box a c" >a c </div>
    <div class="result-box a" >a </div>
    <div class="result-box b c" >b c </div>
    <div class="result-box c" >c </div>
    <div class="result-box a b" >a b </div>
    <div class="result-box c" >a c </div>
    <div class="result-box b" >b </div>
    <div class="result-box a b c">a b c</div>
    <div class="result-box c ">c </div>
    <div class="result-box a c" >a c </div>
</div>

<script>
$("#filters :checkbox").click(function() {
    const selectedFilters = $("#filters :checkbox:checked").map(function() {
        return $(this).val();
    }).get();

    if (selectedFilters.length === 0) {
        $(".result-box").show();
    } else {
        const selector = ".result-box" + selectedFilters.map(cls => "." + cls).join("");
        $(".result-box").hide();
        $(selector).show();
    }
});
</script>

测试一下这些场景：

• 选中Category A和B：只会显示带有a b和a b c的div
• 选中A、B、C：只会显示带有a b c的div
• 只选中A：显示所有带a类的div

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