jQuery中如何在保存后保持动态Radio单选按钮的选中状态

根因定位 #

• 回显逻辑错误：原有代码中$(':input[name="CourseDetails"]').prop('checked', true)会把所有同名单选按钮都设为选中状态，单选框的互斥特性会自动将最后一个元素作为最终选中项，这是始终默认选中最后一个的核心原因。
• 语法错误：jQuery的val()是方法调用，原有判断$("#StudentCourse").val !== ''是判断val方法本身是否为空，该条件永远为true，即使没有保存值也会执行回显逻辑。
• 冗余逻辑：保存逻辑中只存储了单选框的id值，没有用|拼接多值，回显时的split('|')逻辑完全冗余。

修复代码 #

1. 修正JS回显逻辑 #

替换原有回显部分的JS代码即可：

// 正确判断隐藏域是否有保存值
if ($("#StudentCourse").val() !== '') {
    const savedId = $("#StudentCourse").val();
    // 仅给id匹配的单选框设置选中状态
    $(`input[name="CourseDetails"][id="${savedId}"]`).prop('checked', true);
}

2. 可选优化：服务端直接渲染选中状态（无需依赖JS） #

如果不想靠前端JS回显，可以直接在VBHTML生成单选框时就判断选中状态，性能更稳定：

@Code
    For Each item In Model.StudentCourseLookup
        Dim itemName = item.Text
        ' 匹配已保存的值就添加checked属性
        Dim checkedAttr = If(item.Text = Model.StudentCourse, "checked", "")
        @<input type="radio" name="CourseDetails" id="@itemName" class="cbxStudentCourse" @checkedAttr />
        @<span>@item.Text</span>
        @<br />
    Next
End Code

3. 可选优化：简化保存逻辑 #

原有遍历所有单选框的逻辑可以简化为直接取选中项：

function OStudentCourseSave() {
    // 直接获取选中单选框的id
    const selectedId = $('input[name="CourseDetails"]:checked').attr('id') || '';
    $("#StudentCourse").val(selectedId);
    var sc = @Html.Raw(Json.Encode(Model));
    sc.StudentCourse = selectedId;
}

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