如何使用JavaScript检测筛选复选框组是否未选中任何选项？

你的核心验证思路是正确的，但存在两处关键问题需要修正，才能让表单提交逻辑正常生效：

1. 修正提交按钮的触发逻辑 #

原提交按钮仅调用验证函数但未返回结果，导致即使验证不通过，表单依然会提交。需要修改onclick属性，让它返回验证函数的结果：

<input type="submit" class="button_primary" name="applyFilter" value="Apply" onclick="return checkFilter()">

2. 优化JavaScript验证逻辑 #

可以简化选择器写法，同时合并错误提示，避免多次弹窗影响用户体验：

原生JavaScript版本 #

function checkFilter() {
    let isValid = true;
    const errorMessages = [];

    // 检测性别组是否有选中项
    const hasSelectedGender = document.querySelectorAll('.genderFil:checked').length > 0;
    if (!hasSelectedGender) {
        errorMessages.push("请至少选择一个性别");
        isValid = false;
    }

    // 检测分类组是否有选中项
    const hasSelectedCategory = document.querySelectorAll('.categoryFil:checked').length > 0;
    if (!hasSelectedCategory) {
        errorMessages.push("请至少选择一个分类");
        isValid = false;
    }

    // 统一弹出所有错误提示
    if (!isValid) {
        alert(errorMessages.join('\n'));
    }

    return isValid;
}

jQuery版本（兼容原代码写法） #

function checkFilter() {
    let isValid = true;
    const errorMessages = [];

    const checkedGenderCount = $('.genderFil:checked').length;
    if (checkedGenderCount < 1) {
        errorMessages.push("请至少选择一个性别");
        isValid = false;
    }

    const checkedCategoryCount = $('.categoryFil:checked').length;
    if (checkedCategoryCount < 1) {
        errorMessages.push("请至少选择一个分类");
        isValid = false;
    }

    if (!isValid) {
        alert(errorMessages.join('\n'));
    }

    return isValid;
}

额外优化：整理HTML代码冗余 #

你的input标签中重复定义了class属性，可合并为一个，让代码更整洁：

<!-- 性别组示例 -->
<input class="form-check-input genderFil" name="genderFil[]" type="checkbox" value="M" id="genMale" <?= ($isMale == 1) ? "checked" : ""; ?>>
<!-- 分类组示例 -->
<input class="form-check-input categoryFil" name="categoryFil[]" type="checkbox" value="1" id="catShoes" <?= ($isShoes == 1) ? "checked" : ""; ?>>

完成以上修改后，表单会严格验证：只有当性别组和分类组各至少选中一个选项时，才会执行提交操作。

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