如何实现仅当所有单选组选中Yes时提交表单，否则提示错误？

原代码存在的问题 #

• 循环逻辑混乱：遍历每个单选框时，每次都重新获取所有单选元素，无法针对单个单选组做校验
• 状态判断错误：inputs.is(':checked')仅判断是否存在任意选中项，而非所有组都有选中；inputs.val()只会返回第一个匹配元素的值，不是当前组选中的实际值
• 输出逻辑冗余：每个单选框都会触发一次日志输出，不符合“全满足才提交、否则提示”的需求

修正后的实现 #

核心思路 #

1. 提取所有单选组的唯一名称（同一组的name属性相同）
2. 逐个校验每个组：必须有选中项，且选中值为conf
3. 只要一个组不满足条件，就标记校验失败；全部满足则提交表单

HTML代码（无需修改） #

<form id="someForm">
  <p>1-st group</p>
  <div class="radio-box">
    <div class="radio-success">
      <input class="form-check-input" type="radio" name="radio1" value="conf">
    </div>
    <div class="radio-error">
      <input class="form-check-input" type="radio" name="radio1" value="err" >
    </div>
  </div>
  <p>2-nd group</p>
  <div class="radio-box">
    <div class="radio-success">
      <input class="form-check-input"  type="radio" name="radio2" value="conf">
    </div>
    <div class="radio-error">
      <input class="form-check-input"  type="radio" name="radio2" value="err">
    </div>
  </div>
  <button id="test">go!</button>
</form>

JavaScript代码 #

$('#test').on('click', function(e) {   
    e.preventDefault();

    // 获取所有不重复的单选组名称
    const groupNames = [...new Set($('#someForm input[type="radio"]').map(function() {
        return this.name;
    }))];

    let allGroupsValid = true;

    // 逐个校验每个单选组
    groupNames.forEach(name => {
        const checkedItem = $(`input[name="${name}"]:checked`);
        // 组未选中 或 选中了err，标记为无效
        if (!checkedItem.length || checkedItem.val() !== 'conf') {
            allGroupsValid = false;
        }
    });

    if (allGroupsValid) {
        console.log('表单提交');
        $('#someForm').submit(); // 执行实际提交操作
    } else {
        console.log('存在未选择或选择了No的选项');
        // 此处添加其他操作，比如弹窗提示用户
    }
});

代码说明 #

• 用new Set处理单选组名称，自动去重，适配数量不固定的场景
• 每组单独校验，确保逻辑准确
• 用单一变量标记全局校验状态，避免冗余输出，逻辑更清晰

内容的提问来源于stack exchange，提问作者Владимир Солёный