如何在现有表单验证代码中添加多组checkbox至少选2项的校验

我们需要在原有代码基础上新增多选框组的校验逻辑，同时监听文本框输入和多选框状态变化，确保两个条件同时满足时才启用提交按钮：

• 所有带required属性的文本框不为空
• 每个同名的checkbox组都至少选中2个选项

修改后的完整代码 #

JavaScript 代码

$(document).ready(function() {
    // 监听必填文本框输入、多选框状态变化事件
    $('input[required], input[type="checkbox"]').on('keyup change', function() {
        let hasEmptyRequired = false;
        let hasInvalidCheckboxGroup = false;

        // 校验必填文本框
        $('input[required]').each(function() {
            const val = $(this).val().trim();
            if (!val || typeof val === 'undefined') {
                hasEmptyRequired = true;
                return false; // 提前终止循环，提升效率
            }
        });

        // 校验所有checkbox组
        // 获取所有不重复的checkbox name，得到独立的组
        const checkboxNames = [...new Set($('input[type="checkbox"]').map(function() {
            return this.name;
        }).get())];
        
        checkboxNames.forEach(function(name) {
            // 统计当前组下选中的checkbox数量
            const checkedCount = $(`input[type="checkbox"][name="${name}"]:checked`).length;
            if (checkedCount < 2) {
                hasInvalidCheckboxGroup = true;
                return false; // 提前终止循环
            }
        });

        // 根据校验结果控制按钮状态
        if (hasEmptyRequired || hasInvalidCheckboxGroup) {
            $('#register').css('opacity', '0.2').attr('disabled', 'disabled');
        } else {
            $('#register').css('opacity', '1').removeAttr('disabled');
        }
    });
});

HTML 代码（含示例多选框组）

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="text" required placeholder="必填文本1">
<input type="text" required placeholder="必填文本2">

<!-- 示例多选框组1 -->
<div>
    <label><input type="checkbox" name="group1" value="1">选项1</label>
    <label><input type="checkbox" name="group1" value="2">选项2</label>
    <label><input type="checkbox" name="group1" value="3">选项3</label>
</div>

<!-- 示例多选框组2 -->
<div>
    <label><input type="checkbox" name="group2" value="a">选项A</label>
    <label><input type="checkbox" name="group2" value="b">选项B</label>
    <label><input type="checkbox" name="group2" value="c">选项C</label>
</div>

<button type="button" id="register">register</button>

关键逻辑说明 #

1. 事件监听扩展：将事件从仅keyup改为keyup change，绑定到必填文本框和所有多选框，确保文本输入或多选框状态变化时都触发校验。
2. 必填文本框校验优化：发现第一个空文本框时立即终止循环，避免不必要的遍历。
3. 多选框组校验：
   • 通过Set对checkbox的name去重，得到所有独立的多选框组
   • 遍历每个组统计选中数量，只要任意组选中数小于2，就标记校验不通过
4. 按钮状态控制：仅当文本框全不为空且所有多选框组满足选中要求时，才启用提交按钮，否则禁用。

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