javascript - 在没有 onclick 功能的选中单选按钮中查看隐藏表单（在更新表单中）

Question

我想更新表单时遇到问题..所选单选按钮中的隐藏字段未显示。我需要单击另一个单选按钮并单击前一个单选按钮然后它将显示隐藏字段...我怎么能在没有 onclick 功能的选定单选按钮中显示隐藏字段（以更新形式）。我将显示我的 .js 和 html 页面

.js

$("#div_a_pre").hide();

$("input[name='report_type']").on('change', function(){
    if($(this).val() == "notification"){
        $("#div_a_pre").hide();
       
    }
    if($(this).val() == "preliminary"){
        
        $("#div_a_pre").show();
    }
    if($(this).val() == "final"){
        $("#div_a_pre").hide();
       
    }
});

HTML

<div class="border-top form-group row">
                                <label class="col-lg-3 col-form-label ">2.  Type Of Report</label>
                                <div class="col-9 col-lg-5 ">
                                    <label class="custom-control custom-radio custom-control-stacked">
                                        <input type="radio" id="noti" name="report_type" value="notification" class="custom-control-input" {{ $recall->report_type == 'notification' ? 'checked' : ''}}><span class="custom-control-label">Notification / Preliminary Report</span>
                                    </label>
                                    <label class="custom-control custom-radio custom-control-stacked" for="follow">
                                        <input  type="radio" id="follow" value="preliminary" name="report_type" class="custom-control-input" {{ $recall->report_type == 'preliminary' ? 'checked' : ''}}><span class="custom-control-label">Follow Up Report</span>
                                        
                                        <div class="card reveal-if-active" id="div_a_pre" >
                                            <div class="card-body">

                                                <div class="form-group row" >
                                                    <label class="col-lg-5 col-form-label ">Report no: <span style="color:red;">*</span></label>
                                                    <input type="text" id="report_no" name="report_no" class="form-control col-lg-6" value="{{$recall->report_no}}">
                                                    @error('report_no')
                                                        <span class="invalid-feedback" role="alert">
                                                            <strong>{{ $message }}</strong>
                                                        </span>
                                                    @enderror
                                                    
                                                </div>
                                        </div>
                                        </div>

                                    </label>
                                    <label class="custom-control custom-radio custom-control-stacked">
                                        <input type="radio" id="final" value="final" name="report_type" class="custom-control-input" {{ $recall->report_type == 'final' ? 'checked' : ''}}><span class="custom-control-label">Final Report</span>
                                    </label>
                                </div>
                            </div>

界面 “创建表单”在所选单选按钮中显示隐藏字段没有问题
但是在提交表单并想要更新表单后..所选单选按钮中的隐藏字段未显示

标签： javascripthtmljqueryradio-buttonlaravel-8