0

I have a form consisting of some input types. When checkbox is not checked, I want all of other input types to disappear and reappear when checkbox is checked.Could you help me with this please? Here is my code:

  <form id='sample' action='sample.php' method='post'>
  <input type='hidden' name='submitted' id='submitted' value='1'/><br>
 <label for='name' >Your Full Name*: </label>
<input type='text' name='name' id='name' maxlength="50" /><br>
 <label for='email' >Email Address*:</label>
<input type='text' name='email' id='email' maxlength="50" /><br>

<label for='username' >UserName*:</label>
<input type='text' name='username' id='username' maxlength="50" /><br>

<label for='password' >Password*:</label>
 <input type='password' name='password' id='password' maxlength="50" /><br>
<input type="checkbox" name="vehicle" value="Bike"> Hide all!<br>
  <input type='submit' name='Submit' value='Submit' />

</form>
Improve this question
1
  • 1
    BTW you should atleast try something and then ask about problems. Commented Jul 7, 2015 at 18:38

4 Answers 4

Reset to default
1 

$(function(){

$('input[name=vehicle]').on('change', function(){

if(this.checked){
  $('#sample').find('input').not(this).hide();
}
  else{
  $('#sample').find('input').not(this).show();
}

})

})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id='sample' action='sample.php' method='post'>
  <input type='hidden' name='submitted' id='submitted' value='1'/><br>
 <label for='name' >Your Full Name*: </label>
<input type='text' name='name' id='name' maxlength="50" /><br>
 <label for='email' >Email Address*:</label>
<input type='text' name='email' id='email' maxlength="50" /><br>

<label for='username' >UserName*:</label>
<input type='text' name='username' id='username' maxlength="50" /><br>

<label for='password' >Password*:</label>
 <input type='password' name='password' id='password' maxlength="50" /><br>
<input type="checkbox" name="vehicle" value="Bike"> Hide all!<br>
  <input type='submit' name='Submit' value='Submit' />

</form>

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Thank you very much vinayakj. This was what I wanted.Thanks again!
1

Use toggle() method.

$('input[name=vehicle]').on('change', function(){
  $('#sample input[type=text], input[type=password]').toggle();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id='sample' action='sample.php' method='post'>
   <input type='hidden' name='submitted' id='submitted' value='1'/><br>
   <label for='name' >Your Full Name*: </label>
   <input type='text' name='name' id='name' maxlength="50" /><br>
   <label for='email' >Email Address*:</label>
   <input type='text' name='email' id='email' maxlength="50" /><br>
   <label for='username' >UserName*:</label>
   <input type='text' name='username' id='username' maxlength="50" /><br>
   <label for='password' >Password*:</label>
   <input type='password' name='password' id='password' maxlength="50" /><br>
   
   <input type="checkbox" name="vehicle" value="Bike"> Hide all!<br>
   <input type='submit' name='Submit' value='Submit' />
</form>

Improve this answer

Comments

0

Not sure if you also want to hide the label, submit button, so I hide all.

If no, you can add a filter to exclude it.

$('input[type="checkbox"]').change(function() {
    var shouldHide = !$(this).is(':checked');
    // Hide all except
    $(this).siblings('label, input').toggle(shouldHide);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<form id='sample' action='sample.php' method='post'>
  <input type='hidden' name='submitted' id='submitted' value='1'/><br>
 <label for='name' >Your Full Name*: </label>
<input type='text' name='name' id='name' maxlength="50" /><br>
 <label for='email' >Email Address*:</label>
<input type='text' name='email' id='email' maxlength="50" /><br>

<label for='username' >UserName*:</label>
<input type='text' name='username' id='username' maxlength="50" /><br>

<label for='password' >Password*:</label>
 <input type='password' name='password' id='password' maxlength="50" /><br>
<input type="checkbox" name="vehicle" value="Bike"> Hide all!<br>
  <input type='submit' name='Submit' value='Submit' />

</form>

Improve this answer

1 Comment

That is what I am in need of.Thank you very much fuyushimoya!
0

Simply hide the div containing all the text fields and labels see code below:

 <form id='sample' action='sample.php' method='post'>
 <div id="tests">
 <input type='hidden' name='submitted' id='submitted' value='1'/><br>
 <label for='name' >Your Full Name*: </label>
 <input type='text' name='name' id='name' maxlength="50" /><br>
 <label for='email' >Email Address*:</label>
 <input type='text' name='email' id='email' maxlength="50" /><br>

 <label for='username' >UserName*:</label>
 <input type='text' name='username' id='username' maxlength="50" /><br>

 <label for='password' >Password*:</label>
 <input type='password' name='password' id='password' maxlength="50" /><br>
       </div>
 <input type="checkbox" onclick="test()" id="seeCheck"> Hide all!<br>
 <input type='submit' name='Submit' value='Submit' />

</form> 

<script>
    function test(){
       if (document.getElementById('seeCheck').checked) {

        document.getElementById("tests").style.display = 'none';
      } else {
        document.getElementById("tests").style.display = 'block';
    }
    }
</script>

Heres the working code:

http://jsfiddle.net/mgqptmt8/11/

Hope this helps.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.