复选框点击后弹出输入框

最新推荐文章于 2023-12-21 16:41:54 发布

原创最新推荐文章于 2023-12-21 16:41:54 发布 · 987 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #javascript

开发中遇到的问题专栏收录该内容

4 篇文章

订阅专栏

本文介绍如何在HTML5和JavaScript中实现复选框点击后弹出输入框的功能。通过使用ID选择器配合JavaScript代码，可以轻松达成所需效果。

复选框点击后弹出输入框

html代码

<div class="row">
                <div class="col-sm-6">
                    <div class="form-group">
                        <label class="col-sm-3 control-label">OEM：</label>
                        <div class="col-sm-8">
                            <input name="oem" id="oem" class="form-control" type="checkbox" onclick="energyTypeCheck(this);">
                        </div>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="form-group" id="h1">
                        <label class="col-sm-3 control-label">产能月最大产：</label>
                        <div class="col-sm-8">
                            <input name="maxYield" id="maxYield" class="form-control" type="text">
                        </div>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="form-group" id="h2">
                        <label class="col-sm-3 control-label">产能月最小产：</label>
                        <div class="col-sm-8">
                            <input name="minYield" id="minYield" class="form-control" type="text">
                        </div>
                    </div>
                </div>
            </div>

js代码

//静态   单选框是否选中
        var oem = $('#oem').prop('checked');
        if(oem){ //选中  显示
            document.getElementById("h1").style.display = "block";
            document.getElementById("h2").style.display = "block";
        } else{  //未选中  隐藏
            document.getElementById("h1").style.display = "none";
            document.getElementById("h2").style.display = "none";
        }

        //动态点击打勾显示  不点击打勾隐藏
        function energyTypeCheck(chk) {
            if(chk.checked){ //显示
                document.getElementById("h1").style.display = "block";
                document.getElementById("h2").style.display = "block";
            }else{      //隐藏
                document.getElementById("h1").style.display = "none";
                document.getElementById("h2").style.display = "none";
            }
        }