Run ยป
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>How to show Hide Elements By click on checkbox in Jquery </title> <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> <style type="text/css"> .box { color: black; display: none; margin-top: 20px; } .check { background: #ffffff; } </style> </head> <body> <div> <label><input type="checkbox" name="colorCheckbox" value="check"> Click on the check box</label> </div> <div class="check box"> <form method="post" action="" id="myfrm"> <fieldset> <legend>Personal information:</legend> First name:<br> <input type="text" name="firstname"> <br> Last name:<br> <input type="text" name="lastname"> <br><br> <input type="submit" value="Submit"> </fieldset> </form> </div> <script type="text/javascript"> $(document).ready(function() { $('input[type="checkbox"]').click(function() { var inputValue = $(this).attr("value"); $("." + inputValue).toggle(); }); }); </script> </body> </html>