元素设置display:none时如何显示预选中单选框对应的关联内容

问题原因 #

你的现有代码仅为单选框绑定了点击时的内容切换逻辑，未在页面初始化阶段处理默认选中项的内容展示，因此预选中的单选框对应内容会保持display: none的隐藏状态。

修复方案 #

只需要在页面加载完成后，主动执行一次选中项的内容显示逻辑即可，有两种常用实现方式：

方案1：复用现有点击逻辑（代码改动最小） #

直接在原有JS代码末尾新增一行，主动触发默认选中单选框的点击事件，复用已有的切换逻辑：

$(document).ready(function(){
    $('input[type="radio"]').click(function(){
        var inputValue = $(this).attr("value");
        var targetBox = $("." + inputValue);
        $(".box").not(targetBox).hide();
        $(targetBox).show();
    });
    // 新增：页面加载完成后触发默认选中项的点击事件
    $('input[type="radio"]:checked').click();
});

方案2：封装切换逻辑（更易维护，无副作用） #

把切换逻辑封装为独立函数，分别在点击和初始化阶段调用，避免触发click事件可能带来的其他副作用：

$(document).ready(function(){
    // 封装公共切换逻辑
    function showCheckedContent() {
        const checkedVal = $('input[name="colorRadio"]:checked').val();
        const target = $("." + checkedVal);
        $(".box").hide();
        target.show();
    }
    // 绑定点击事件
    $('input[type="radio"]').click(showCheckedContent);
    // 初始化调用，显示默认选中项对应内容
    showCheckedContent();
});

两种方案都可以解决预选中项内容默认不显示的问题，你可以根据自己的业务场景选择。

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