jQuery 复选框按位置、语言过滤网格时多选项不生效问题求解

API 探路者

2026-10-8

多属性多选筛选修复方案

问题根源

原代码存在两个核心问题导致多选失效：

直接将选中值数组拼接进选择器，多选时数组自动转为带逗号的字符串，匹配逻辑完全失效
没有实现同一属性下多个选项的「或匹配」逻辑，仅支持单个值匹配

修改后完整代码（全兼容版本）

function filterCategory() {
    // 获取选中的位置数组
    const locationChecked = [];
    $('.location input[type=checkbox]:checked').each(function () {
        locationChecked.push(this.value);
    });
    // 获取选中的语言数组
    const languageChecked = [];
    $('.language input[type=checkbox]:checked').each(function () {
        languageChecked.push(this.value);
    });

    // 重置所有项状态
    $('.team-member').removeClass('active');

    // 遍历筛选：不同属性为且逻辑，同一属性多选项为或逻辑
    $('.team-member').filter(function() {
        const itemLocation = $(this).data('location');
        const itemLanguage = $(this).data('language');
        // 位置校验：未选位置则直接通过，选中的情况需要值在选中数组内
        const locationPass = locationChecked.length === 0 || locationChecked.indexOf(itemLocation) > -1;
        // 语言校验：未选语言则直接通过，选中的情况需要值在选中数组内
        const languagePass = languageChecked.length === 0 || languageChecked.indexOf(itemLanguage) > -1;
        return locationPass && languagePass;
    }).addClass('active');
}

// 初始化显示所有项
$('.team-member').addClass('active');

// 绑定复选框变更事件
$('.test :checkbox').change(filterCategory);