如何正确校验所有Radio Button组是否均有选项被选中？

我来帮你排查下问题，你的代码有几个小问题导致校验不生效，咱们一步步修正：

原代码的问题点 #

• 选择器错误：$('input .gender') 这个写法是找input标签内部带有gender类的元素，但你的单选框本身就是带有gender类的input，正确写法应该是 $('input.gender')（去掉空格，代表“带有gender类的input元素”）。
• 方法调用错误：event.preventDefault 是一个方法，必须加括号调用 event.preventDefault();，否则不会阻止表单的默认提交行为。
• 校验逻辑错误：原代码的判断逻辑是“只要存在未选中的单选框就提示”，但实际需求是每个单选框分组（按name属性分组）都要有选中项，所以需要按分组来逐一检查。

正确的实现代码 #

下面是修正后的完整代码，核心逻辑是先获取所有唯一的单选框分组名称，再逐个检查每个分组是否有选中项：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
    <input class="gender" type="radio" name="answer[1]" value="male"> Male<br>
    <input class="gender" type="radio" name="answer[1]" value="female"> Female<br>
    <input class="gender" type="radio" name="answer[1]" value="other"> Other<br>
    <br><br>
    <input class="gender" type="radio" name="answer[2]" value="PHP"> PHP<br>
    <input class="gender" type="radio" name="answer[2]" value="Pyhon"> Python<br>
    <input class="gender" type="radio" name="answer[2]" value="Java"> Java<br>
    <input class="btn" type="submit" value="check">
</form>

<script>
$(".btn").click(function(event) {
    // 阻止表单默认提交行为
    event.preventDefault();
    
    // 获取所有唯一的单选框分组name值
    const groupNames = new Set($('input.gender').map(function() {
        return $(this).attr('name');
    }).get());
    
    let isAllChecked = true;
    
    // 遍历每个分组，检查是否有选中项
    groupNames.forEach(name => {
        if (!$(`input.gender[name="${name}"]`).is(":checked")) {
            isAllChecked = false;
        }
    });
    
    // 如果有分组未选中，弹出提示
    if (!isAllChecked) {
        alert("empty");
    }
});
</script>

代码说明 #

1. 使用Set来获取唯一的分组名称，避免重复检查同一个分组。
2. 遍历每个分组，通过input.gender[name="${name}"]精准定位当前分组的所有单选框，检查是否有选中项。
3. 只有当所有分组都有选中项时，才不会弹出提示；只要有一个分组未选中，就触发alert("empty")。

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