表单中通过单选框或复选框控制输入框的显示和隐藏

<form action="{:sysuri()}" method="post" data-auto="true" class="layui-form layui-card">
    //单选框 控制输入框---------------------
    <div class="layui-input-block">
        <label class="think-radio notselect">
            <input type="radio" name="status" value="1" lay-ignore>通过
            <input type="radio" name="status" value="2" lay-ignore>不通过
        </label>
    </div>
 
    <div class="layui-form-item" id="div-reason">
        <label class="layui-form-label">
            <b class="color-green">理由</b><br><span class="nowrap color-desc">Reason</span>
        </label>
        <div class="layui-input-block">
            <input type="text" name="reason" required value="" placeholder="请输入" class="layui-input">
            <p class="help-block">通过理由</p>
        </div>
    </div>
 
    //复选框 控制输入框----------------------------------
    <div class="layui-input-block">
        <label class="think-checkbox notselect">
            <input type="checkbox" id="checkYaml" name="status2" value="1" lay-ignore>允许
        </label>
    </div>
 
    <div class="layui-form-item" id="branch_build_div">
        <label class="layui-form-label">
            <b class="color-green">允许类型</b><br><span class="nowrap color-desc">AllowExts</span>
        </label>
        <div class="layui-input-block">
            <input type="text" name="allow_exts" required value="" placeholder="请输入" class="layui-input">
            <p class="help-block">设置系统</p>
        </div>
    </div>
    //---------------------------------------------------
 
    <div class="layui-form-item text-center">
        <button class="layui-btn" type="submit">提交</button>
    </div>
</form>
<script>
    $(function () {
        //先隐藏输入框两个输入框
        $('#div-reason').hide();
        $("#branch_build_div").hide();
 
        //单选框 控制输入框---------------------
        
        $('input:radio[name="status"]').change(function () {
            var v = $(this).val();
            if (v == '1') {
                $('#div-reason').show();
            } else {
                $('#div-reason').hide();
            }
        });
        
        //复选框 控制输入框----------------------------------
        $("#checkYaml").change(function () {
            if ($("#checkYaml").prop("checked")) {
                $("#branch_build_div").show();
            } else {
                $("#branch_build_div").hide();
            }
 
        });
    })
</script>复制