jQuery单选按钮切换表单字段 URL带reference_id时选中Field_Two异常问题

问题原因 #

你当前的代码存在两处核心缺陷：

• 没有添加URL查询参数的读取判断逻辑，无法识别URL中是否携带reference_id参数
• 直接对所有单选框触发点击事件，默认会执行第一个单选框（Field_One）的显示逻辑，无法适配参数存在时的自动切换需求

修复方案 #

修改后的完整JS代码如下：

$(document).ready(function () {
    // 封装获取URL查询参数的方法
    function getQueryParam(name) {
        const urlParams = new URLSearchParams(window.location.search);
        return urlParams.get(name);
    }

    // 单选框点击切换逻辑保留
    $('input[type="radio"]').click(function () {
        if ($(this).attr("value") == "Field_One") {
            $(".Field_One").show();
            $(".Field_Two").hide();
        }
        if ($(this).attr("value") == "Field_Two") {
            $(".Field_Two").show();
            $(".Field_One").hide();
        }
    });

    // 页面加载时先判断URL参数
    const referenceId = getQueryParam('reference_id');
    if (referenceId) {
        // 存在reference_id参数，选中Field_Two单选框
        $('input[value="Field_Two"]').prop('checked', true);
    }
    // 只触发当前选中的单选框的点击事件，刷新字段显示状态
    $('input[type="radio"]:checked').trigger('click');
});

逻辑说明 #

1. 新增的getQueryParam方法可以读取URL中指定的查询参数值
2. 页面加载完成后先判断是否存在reference_id参数：如果存在，就主动将Field_Two单选框设为选中状态
3. 只触发当前处于选中状态的单选框的点击事件，避免多个单选框事件冲突，保证显示的字段和选中的单选框匹配

原有HTML代码不需要改动，可正常保留使用。

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