jQuery实现radio选中控制文本框显隐不生效的问题排查

问题根因 #

你的代码存在6处直接导致功能失效的问题：

• 选择器匹配错误：需要控制的是id为no_bpjs的表单行容器，内部输入框id为nobpjs，但你全程使用$('.nobpjs')选择元素——这是匹配class为nobpjs的元素，页面中不存在对应元素，所有显隐操作都找不到目标。
• 初始逻辑写反：需求为选中BPJS时隐藏输入框，你写的BPJS选中分支执行的是fadeIn()显示操作，和需求完全相反。
• 事件绑定缺失：仅给BPJS单选按钮绑定了点击事件，点击Umum选项时不会触发任何显隐判断逻辑。
• 无效内联事件报错：两个单选按钮的onclick属性中调用了w3.show()/w3.hide()，但页面未引入W3JS相关库，且选择器写的是不存在的#nomor_bpjs，会直接抛出w3 is not defined的JS错误，阻断后续所有脚本执行。
• 属性重复冲突：每个单选按钮上写了两个value属性，PHP输出的value会覆盖前面硬编码的"Umum"/"BPJS"值，会导致值判断逻辑异常。
• 判断逻辑语法错误：else if分支中写的$('input[id="umum"]').on('click')是事件绑定语法，不是判断Umum是否选中的条件，该分支永远无法按预期执行。

修复方案 #

1. 删除两个单选按钮上无效的内联onclick事件，移除重复的value属性，用表单辅助方法正确处理选中态回显
2. 统一给同组单选按钮绑定change事件（相比click事件，可覆盖键盘切换选项的场景）
3. 修正选择器，直接通过id定位到包裹BPJS输入框的表单行容器
4. 调整显隐判断逻辑，选中BPJS时隐藏容器，选中Umum时显示容器
5. 页面初始化时根据默认选中的选项执行一次显隐判断，避免初始状态和选中逻辑不一致

修复后完整代码 #

<!-- 引入jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

<div class="form-group row">
    <label class="col-form-label col-sm-2 pt-0">Pengobatan</label>
    <div class="col-sm-10">
        <div class="custom-control custom-radio custom-control-inline">
            <input type="radio" id="umum" name="pengobatan" class="minimal" value="Umum" <?= set_radio('pengobatan', 'Umum', true) ?>>
            <label class="detail" for="umum">Umum</label>
        </div>
        <div class="custom-control custom-radio custom-control-inline">
            <input type="radio" id="bpjs" name="pengobatan" class="minimal" value="BPJS" <?= set_radio('pengobatan', 'BPJS') ?>>
            <label class="detail" for="bpjs">BPJS</label>
        </div>
    </div>
</div>

<!-- 注意这里容器id是no_bpjs，和选择器对应 -->
<div class="form-group row" id="no_bpjs">
    <label for="nobpjs" class="col-sm-2 col-form-label">No. BPJS </label>
    <div class="col-sm-10">
        <input type="text" class="form-control" id="nobpjs" name="nobpjs" placeholder="Masukan Nomor BPJS" value="<?= set_value('no_bpjs') ?>">
    </div>
</div>

<script>
$(function() {
    // 抽离显隐控制逻辑，方便初始化和事件触发时复用
    function toggleBpjsField() {
        const selectedType = $('input[name="pengobatan"]:checked').val();
        selectedType === 'BPJS' ? $('#no_bpjs').hide() : $('#no_bpjs').fadeIn();
    }

    // 页面加载完成后先执行一次，匹配默认选中状态
    toggleBpjsField();

    // 监听同组所有单选按钮的切换事件
    $('input[name="pengobatan"]').on('change', toggleBpjsField);
});
</script>

提示：如果需要表单提交后保留显隐状态，只要保证set_radio()方法正确输出选中属性即可，脚本初始化时会自动匹配状态，不需要额外写判断。

内容的提问来源于stack exchange，提问作者Bima Moch Hafidh Al Fadlurrohm