点击不同的单选按钮展示不同的效果

前台页面是layui写的

<script type="text/html" id="online">
  

    <form class="layui-form" action="">
        
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
                <legend style="font-size: 20px !important;">开票信息</legend>
        </fieldset>
        <div class="layui-form-item" style="margin-top: 5px;">
            
            <div class="layui-inline">
                <label class="layui-form-label"><span class="layui-form-label-required">*</span>发票信息:</label>
                <div class="layui-input-block" style=" width: 600px;" id="invoiceHeaderType">
                    <input name="invoiceHeaderType" value="individual" title="个人发票" type="radio" lay-filter="invoiceHeaderType" {{# if(d.invoiceHeaderType=='individual'){ }} checked {{# } }} checked>
                    <input name="invoiceHeaderType" value="enterprise" title="企业发票" type="radio" lay-filter="invoiceHeaderType" {{# if(d.invoiceHeaderType=='enterprise'){ }} checked {{# } }}>
                </div>
            </div>
        </div> 
        <div class="individual_datas">
            <div class="layui-form-item company" style="margin-top: 5px;">
                <div class="layui-inline">
                    <label class="layui-form-label"><span class="layui-form-label-required">*</span>姓名:</label>
                    <div class="layui-input-inline">
                        <input class="layui-input" name="invoiceHeader" placeholder="请输入姓名" autocomplete="off" lay-verify="required" id="invoiceHeader" value="{{d.invoiceHeader || '' }}" type="text">
                    </div>
                </div>
            </div>
        </div>
        <div class="enterprise_datas">
            <div class="layui-form-item company" style="margin-top: 5px;">
                <div class="layui-inline">
                    <label class="layui-form-label"><span class="layui-form-label-required">*</span>企业名称:</label>
                    <div class="layui-input-inline">
                        <input class="layui-input" name="invoiceHeader" placeholder="请输入企业名称" autocomplete="off" lay-verify="required" id="invoiceHeader" value="{{d.invoiceHeader || '' }}" type="text">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label"><span class="layui-form-label-required">*</span>纳税人识别号:</label>
                    <div class="layui-input-inline">
                        <input name="taxpayerNumber" value="{{d.taxpayerNumber || ''}}" placeholder="请输入纳税人识别号" lay-verify="required" id="taxpayerNumber" autocomplete="off" class="layui-input" type="text">
                    </div>
                </div>
            </div>
            <div class="layui-form-item company" style="margin-top: 5px;">
                <div class="layui-inline">
                    <label class="layui-form-label"><span class="layui-form-label-required spans">*</span>电话:</label>
                    <div class="layui-input-inline">
                        <input class="layui-input" name="taxpayerPhone" placeholder="请输入电话" autocomplete="off" id="taxpayerPhone" value="{{d.taxpayerPhone || '' }}" type="text">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label"><span class="layui-form-label-required spans">*</span>地址:</label>
                    <div class="layui-input-inline">
                        <input name="taxpayerAddress" value="{{d.taxpayerAddress || ''}}" placeholder="请输入地址" lay-verify="required" id="taxpayerAddress" autocomplete="off" class="layui-input" type="text">
                    </div>
                </div>
            </div>
            <div class="layui-form-item company" style="margin-top: 5px;">
                <div class="layui-inline">
                    <label class="layui-form-label"><span class="layui-form-label-required spans">*</span>开户行:</label>
                    <div class="layui-input-inline">
                        <input class="layui-input" name="taxpayerBank" placeholder="请输入开户行" autocomplete="off"  lay-verify="required" id="taxpayerBank" value="{{d.taxpayerBank || '' }}" type="text">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label"><span class="layui-form-label-required spans">*</span>银行账号:</label>
                    <div class="layui-input-inline">
                        <input name="taxpayerBankAccount" value="{{d.taxpayerBankAccount || ''}}" placeholder="请输入银行账号" lay-verify="required"  id="taxpayerBankAccount" autocomplete="off" class="layui-input" type="text">
                    </div>
                </div>
            </div>
        </div>
        
        <div class="layui-form-item">
            <div class="layui-input-block" style="margin-left: 50%">
                <button class="layui-btn" lay-submit lay-filter="saveInvoiceData">添加发票信息</button>
            </div>
        </div>
    </form>
</script>

js代码

  form.on('radio(invoiceHeaderType)', function (data) {
        
        if ($('#invoiceHeaderType input[name="invoiceHeaderType"]:checked ').val() == "individual") {
            debugger;
            $(".enterprise_datas").hide();
            $(".individual_datas").show();
        }
        else {
            debugger;
            $(".individual_datas").hide();
            $(".enterprise_datas").show();
        }
    });

成功隐藏或展示