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

最新推荐文章于 2023-06-05 16:24:24 发布

原创最新推荐文章于 2023-06-05 16:24:24 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #html #jquery

该文章展示了一个HTML表单，包含单选框和复选框，通过JavaScript实现输入框的显示与隐藏控制。当用户选择通过时，显示理由输入框；勾选允许时，显示允许类型输入框。表单提交按钮用于提交数据。

<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>