input radio单选框未选中时无法隐藏关联内容如何解决

问题根源 #

• 单选框未使用相同name属性，原生互斥能力失效，额外写的uncheckAndCheck手动修改选中状态的逻辑和toggle切换显隐的逻辑冲突
• 点击事件仅处理当前点击单选框对应内容的显隐切换，未主动隐藏其他未选中单选框的关联内容
• 原有代码里单选框和关联内容的对应逻辑写反，也会导致显隐不符合预期

优化后代码 #

HTML代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- 单选框统一name属性实现原生互斥，加data-target明确关联对应内容ID -->
<input type="radio" class="new-control-input" name="custom-radio" id="alternarx" data-target="#prueba"/>
<div id="prueba"> Content1 </div>

<input type="radio" class="new-control-input" name="custom-radio" id="alternar" data-target="#pruebax"/>
<div id="pruebax"> Content2 </div>

CSS代码 #

#prueba, #pruebax{
    display: none;
}

JS代码 #

// 统一监听同组单选框的选中状态变化事件
$("input[name='custom-radio']").change(function() {
    // 先隐藏所有关联内容
    $('#prueba, #pruebax').hide();
    // 仅显示当前选中单选框对应的内容
    const target = $(this).data('target');
    $(target).show();
});

逻辑说明 #

• 同name的单选框原生支持互斥选中，不需要手动写JS控制选中状态，减少逻辑冲突
• 监听change事件而非click事件，避免多次触发的问题，只要选中状态变化就会触发
• 每次选中状态变化时先隐藏所有关联内容，再仅展示当前选中项对应的内容，不会出现遗漏隐藏的情况
• 用data-target做关联，后续新增单选框只需要加对应属性即可，不用重复写绑定逻辑

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