Show/hide text boxes depending on checkbox

I want to hide/show text boxes when user click on check boxes. I already searched in stack overflow, but I didn't get the solution..

Here is my code:

<div class="form-group has-feedback">
    <input type="text" class="form-control" placeholder="Email" id="email" name="email" >
    <span class="glyphicon glyphicon-envelope form-control-feedback"></span>
  </div>

  <div class="form-group has-feedback">
    <input type="text" class="form-control" placeholder="Mobile Number" name="mobile_number" >
    <span class="glyphicon glyphicon-phone form-control-feedback"></span>
  </div>

I want to give one check box name display contact info or not. If user click on yes I want to show these two fields. If user click no I want to hide these two fields.

Can anyone help me?

Thanks in advance.

Answers 1

  • You can achieve this simple task by jQuery. Suppose you have checkbox with an id of contact-info you have to check that is checked with the help of :checked seudo class and display input type display none and display block.

    if('#contact-info').is(":checked")){
       $('#email,#mobile').css("display","block");
    }else{
       $('#email,#mobile').css("display","none");
     }
    

Related Articles