jQuery 勾选显示 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .shows{
                display: none;
            }
        </style>
    </head>
    <body>
        <label for="check">
            <input type="checkbox" name="check" id="check" value="1" />
            <span>启用输入框</span>
        </label>
        
        <br /><br />
        <div class="shows">
            公式：<input type="text" name="texts" id="texts" placeholder="请输入..."/>
        </div>
        
        <script src="js/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            $(function(){
                $("#check").click(function(){
                    var check = this.checked;
                    if (check){
                        $('.shows').slideDown().show();
                    }else{
                        $('.shows').slideUp().hide();
                    }
                })
            })
        </script>
    </body>
</html>

效果预览：

posted @ 2021-01-27 22:27  芳香四溢713051  阅读(100)  评论(0)    收藏  举报