CODEWITHSUNDEEP
javascriptjquery
M5533
M5533

Reputation: 117

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.

Upvotes: 2

Views: 176

Answers (3)

Khan Afzal
Khan Afzal

Reputation: 167

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");
 }

Upvotes: 2

Sagar V
Sagar V

Reputation: 12478

function check(opt){
 if(opt == 'yes'){
    document.getElementById('email').style.display="";
    document.getElementById('mobile').style.display="";
    document.getElementById("no").checked=false;
 }
 else
 if(opt == 'no'){
     document.getElementById('email').style.display="none";
     document.getElementById('mobile').style.display="none";
     document.getElementById("yes").checked=false;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group has-feedback">
    <input style="display:none;" 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="Name" id="name" name="name" >
    <span class="glyphicon glyphicon-envelope form-control-feedback"></span>
  </div>
  <div class="form-group has-feedback">
    <input style="display:none;" type="text" class="form-control" placeholder="Mobile Number" name="mobile_number" id="mobile" >
    <span class="glyphicon glyphicon-phone form-control-feedback"></span>
  </div>
  Yes : <input type="checkbox" onclick="check('yes');" id="yes" />
  No : <input type="checkbox" onclick="check('no');" id="no" />

Upvotes: 1

MAREESKANNNAN RAJENDRAN
MAREESKANNNAN RAJENDRAN

Reputation: 557

Please check

$(function(){
    $('your checkbox id or name').prop(true/false);
    checkBoxOnchange();
});

function checkBoxOnchange() {
    if ($('your checkbox id or name').is(":checked")) {
        $("input[name='email']").show();
        $("input[name='mobile_number']").show();
    } else {
        $("input[name='email']").hide();
        $("input[name='mobile_number']").hide();
    }
}

and in ur checkbox on-change event call checkBoxOnchange()

Upvotes: 1

Related Questions