表单保存进度异常：单选框全部被取消选中问题排查

问题描述 #

表单包含多个带required属性的单选框组，每个组都配有隐藏的N/A选项。核心需求是：

• 点击「保存进度」时，自动为未选择的单选组选中N/A，绕过必填校验后提交表单
• 页面加载时，取消所有选中的N/A选项，避免干扰用户编辑

但实际运行后，所有单选框都会被取消选中——包括原本用户选择的非N/A选项，且保存功能也未正常触发。

错误原因 #

1. 保存进度逻辑完全错误：

   • 原代码中$('input[type=radio]:not(:checked)')会选中所有未勾选的单选框（包括每个组里的非N/A选项），随后将它们的value改为N/A并设为选中，这会导致同一个单选组出现多个选中项（违背单选框互斥规则），提交后服务器处理混乱，页面重新加载时这些被篡改的选项会被取消选中，最终所有单选框为空。
   • $(this).submit()中的this指向点击的.qksv元素，而非表单，因此无法触发表单提交。

2. 页面加载逻辑冗余且无针对性：

   • 原代码遍历所有N/A单选框取消选中，没有区分是否是已选中的状态，虽不直接导致问题，但逻辑不够精准。

修正后的代码 #

JavaScript（jQuery） #

// 页面加载时，隐藏所有N/A单选框及其父容器
$('input[type=radio][value="N/A"]').hide().parent().hide();

// 页面加载时，仅取消已选中的N/A单选框
$('input[type=radio][value="N/A"]:checked').prop("checked", false);

// 点击「保存进度」时的处理逻辑
$(document).on('click', '.qksv', function(e) {
    e.preventDefault(); // 阻止链接默认跳转，确保逻辑执行完成
    
    // 按单选组分组处理，避免重复操作同一组
    $('input[type=radio]').filter(function() {
        // 只保留每个单选组的第一个元素，作为组的标识
        return $(this).closest('.form-group').find('input[name="' + this.name + '"]:first').is(this);
    }).each(function() {
        var groupName = this.name;
        // 检查当前组是否已有选中项
        var hasSelected = $('input[name="' + groupName + '"]:checked').length > 0;
        
        if (!hasSelected) {
            // 无选中项时，仅选中该组的N/A选项
            $('input[name="' + groupName + '"][value="N/A"]').prop('checked', true);
        }
    });
    
    // 找到当前表单并提交
    $(this).closest('form').submit();
});

HTML（单选组示例） #

<div class="col-12">
    <div class="form-group required-control">
        <label class=" form-label fw-bold" for="radio_1">Next activity?</label>
        <div class="form-check form-check-inline">
            <input type="radio" name="radio_1" id="radio_1_0" class="form-check-input" value="Another ticket" data-alias="" data-required="true">
            <label for="radio_1_0" class="form-check-label">
                Another ticket
            </label>
        </div>
        <div class="form-check form-check-inline">
            <input type="radio" name="radio_1" id="radio_1_1" class="form-check-input" value="Travel home" data-alias="" data-required="true">
            <label for="radio_1_1" class="form-check-label">
                Travel home
            </label>
        </div>
        <div class="form-check form-check-inline" style="display: none;">
            <input type="radio" name="radio_1" id="radio_1_2" class="form-check-input" value="N/A" data-alias="" data-required="true" style="display: none;">
            <label for="radio_1_2" class="form-check-label">
                N/A
            </label>
        </div>
        <span id="radio_1"></span>
    </div>
</div>

代码解释 #

1. 页面加载处理：

   • 仅隐藏N/A选项及其父容器，保持页面整洁。
   • 精准取消已选中的N/A单选框，完全不影响用户已选择的其他选项。

2. 保存进度逻辑：

   • 先阻止链接默认跳转（e.preventDefault()），确保所有处理逻辑执行完毕再提交。
   • 按单选组分组处理：通过筛选每个组的第一个元素，避免重复操作同一组的多个单选框。
   • 对未选中的组，仅选中该组的N/A选项，不修改其他选项的value，严格保证单选组的互斥性。
   • 通过closest('form')定位当前表单并提交，确保提交动作生效。

3. 额外适配说明：

   • 无需修改单选框的required属性，选中N/A即可满足必填校验要求。
   • 完全保留分步表单原有逻辑，不会因为默认值破坏流程，同时支持用户多次保存进度后继续编辑。

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