<!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>
效果预览: