jQuery触发默认选中input的click事件实现指定div默认显示问题

错误原因 #

• .is(":checked")是用于判断单个jQuery对象是否符合选择器条件的方法，返回值为布尔类型（true/false），不是jQuery对象，无法链式调用trigger方法，所以原有代码会抛出JS异常，无法执行。
• 你需要的是筛选出所有处于选中状态的.hS input元素，正确写法是把:checked作为选择器的一部分使用。

修复方案 #

只需要修改最后一行触发事件的代码即可，修改后完整JS代码如下：

$(".hS .showDiv").hide();

$(document).on("change click",".hS input",function(){
    var div = $(this).closest(".hS").find(".showDiv");
    if($(this).val()==1){
        div.show();
    }else{
        div.hide();
    }  
});

// 筛选所有已选中的input元素再触发点击事件
$(".hS input:checked").trigger("click");

修改后运行时，前两组单选框默认选中的值为1，会触发显示Hello 1、Hello 2，后两组选中的值为2、3，会触发隐藏对应的Hello 3、Hello 4，完全符合你的需求。

可选优化 #

你也可以选择不触发点击事件，直接在初始化阶段完成显示状态设置，避免触发不必要的事件回调：

// 先隐藏所有div
$(".hS .showDiv").hide();

// 初始化时遍历每个选项组单独处理显示逻辑
$(".hS").each(function(){
    const checkedVal = $(this).find("input:checked").val();
    if(checkedVal == 1){
        $(this).find(".showDiv").show();
    }
});

// 绑定交互事件
$(document).on("change click",".hS input",function(){
    var div = $(this).closest(".hS").find(".showDiv");
    if($(this).val()==1){div.show();}else{div.hide();}  
});

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