jQuery单选按钮切换内容：默认选中项加载显示异常求助

这个问题很常见——页面加载时默认选中的单选按钮不会自动触发change事件，所以你的切换逻辑只在用户手动点击时生效，初始化阶段没执行，导致内容显示和选中状态不匹配。解决思路很简单：把内容切换的逻辑封装成可复用的函数，然后在页面初始化时主动调用一次，同时绑定到change事件上。

步骤1：封装切换逻辑为独立函数 #

把判断选中值并切换内容显示的代码抽出来，既能在初始化时调用，也能在用户切换单选按钮时复用：

function toggleContentBlocks() {
    // 获取当前选中的单选按钮的值
    var selectedValue = $('input[type="radio"][name="b_type"]:checked').val();
    
    if (selectedValue == 1) {
        $('#person-block').show();
        $('#institute-block').hide(); // 如果你原代码里的`#person-institute`是笔误，可以根据实际业务调整这里的逻辑
    } else {
        $('#institute-block').show();
        $('#person-block').hide();
    }
}

步骤2：初始化调用+绑定事件 #

在DOM加载完成后，先执行一次切换函数，确保默认选中的单选按钮对应的内容正确显示，再把函数绑定到change事件上：

$(document).ready(function() {
    // 页面加载完成后，立即根据默认选中状态切换内容
    toggleContentBlocks();

    // 绑定单选按钮的change事件，用户切换时触发逻辑
    $('input[type="radio"][name="b_type"]').on('change', toggleContentBlocks);
});

额外提示：修复原代码的语法错误 #

你原来的jQuery代码最后少了一个闭合的}，导致语法错误，这也会影响代码执行，注意要确保代码结构完整：

原代码末尾的});前面需要添加一个}来闭合else代码块。

这样修改后，不管页面加载时默认选中的是哪个单选按钮，对应的内容块都会正确显示，用户切换时也能正常触发内容切换逻辑。

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