首页 前端知识 表单中通过单选框或复选框控制输入框的显示和隐藏

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

2024-02-28 11:02:20 前端知识 前端哥 25 994 我要收藏
<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>
转载请注明出处或者链接地址:https://www.qianduange.cn//article/2900.html
标签
评论
会员中心 联系我 留言建议 回顶部
复制成功!