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

<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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值