The Demo
The Code
Output
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <script> $(document).ready(function() { $("#demochecked").change(function() { if(this.checked) { $("#chkboxdemo").show(); } else { $("#chkboxdemo").hide(); } }) }); </script> <style> .divcls { width:auto; height: auto; padding:20px; background-color:#4D9999; color:#fff; font-size:15px; } </style> </head> <body> <div class="divcls"><p>jQuery checkbox check/uncheck demo with a form</p> <input type="checkbox" checked id="demochecked"/>Create Account? Yes / No </div> <div class="container" id="chkboxdemo"> <h1>Fill in the form below for creating account</h1> <form class="form-horizontal" role="form"> <div class="form-group"> <label for="name1" class="col-sm-2 control-label">First Name:</label> <div class="col-sm-4"> <input type="text" class="form-control" name="fname" placeholder="Your First Name"> </div> </div> <div class="form-group"> <label for="name1" class="col-sm-2 control-label">Last Name:</label> <div class="col-sm-4"> <input type="text" class="form-control" name="lname" placeholder="Your Last Name"> </div> </div> <div class="form-group"> <label for="gender1" class="col-sm-2 control-label">Gender:</label> <div class="col-sm-2"> <select class="form-control" name="ygender"> <option>Male</option> <option>Female</option> </select> </div> </div> <div class="form-group"> <label for="email1" class="col-sm-2 control-label">Your Email:</label> <div class="col-sm-5"> <input type="email" class="form-control" name="yemail" placeholder="Enter Email address"> </div> </div> <div class="form-group"> <label for="password1" class="col-sm-2 control-label">Password:</label> <div class="col-sm-3"> <input type="password" class="form-control" name="ypassword" placeholder="(Must be 8 characters long)"> </div> </div> <div class="form-group"> <label for="address1" class="col-sm-2 control-label">Address:</label> <div class="col-sm-5"> <input type="text" class="form-control" name="postaddress" placeholder="Where do you live?"> </div> </div> <div class="col-sm-offset-2 col-sm-5"> <p><input type="submit" class="btn btn-lg btn-block btn-success" value="Create My Account"></p> </div> </div> </form> </body> </html>
jQuery checkbox check/uncheck demo with a form
Create Account? Yes / No
Fill in the form below for creating account
First Name:
Last Name:
Gender:
Male
Female
Your Email:
Password:
Address: