I have 2 radio buttons. On selection of one I want to display 3 text boxes and hide it on selection of other.

Here is the code.

These are my 2 radio buttons.

<input type="radio" name="type"> Fresher

<input type="radio" name="type"> Experienced 

On click of radio button experienced I want to display these 3 text box.

Company Name: <input type="text"  hidden="true"/> <br/>
Designation: <input type="text" hidden="true"/> <br/>
Year_of_Experience: <input type="text"  hidden="true"/> <br/>

Please help me out with javascript for this as new to it.

I have 2 radio buttons. On selection of one I want to display 3 text boxes and hide it on selection of other.

Here is the code.

These are my 2 radio buttons.

<input type="radio" name="type"> Fresher

<input type="radio" name="type"> Experienced 

On click of radio button experienced I want to display these 3 text box.

Company Name: <input type="text"  hidden="true"/> <br/>
Designation: <input type="text" hidden="true"/> <br/>
Year_of_Experience: <input type="text"  hidden="true"/> <br/>

Please help me out with javascript for this as new to it.

• javascript
• jquery
• html

8 Answers 8

You could do this as follows. First change your HTML to this:

<input type="radio" name="type" value="Fresher"> Fresher
<input type="radio" name="type" value="Experienced"> Experienced

<div id="textboxes" style="display: none">
    Company Name: <input type="text" hidden="true"/> 
    Designation: <input type="text" hidden="true"/> 
    Year_of_Experience: <input type="text" hidden="true"/> 
</div>

What this code adds to your code is to have a value for the radio buttons. This allows us to make a selection based on which radio button was selected. Secondly, the input fields are grouped together in a <div> to allow for easy hiding of the three input fields. After you have modifief your HTML as such, include jQuery on your website and use this code:

$(function() {
    $('input[name="type"]').on('click', function() {
        if ($(this).val() == 'Experienced') {
            $('#textboxes').show();
        }
        else {
            $('#textboxes').hide();
        }
    });
});

You can see how this works using this JSFiddle: http://jsfiddle/pHsyj/

This is the best example.Try something like this.,this is a sort of example

$("input[type='radio']").change(function(){

if($(this).val()=="other")
{
    $("#otherAnswer").show();
}
else
{
       $("#otherAnswer").hide(); 
}

});

http://jsfiddle/Wc2GS/8/

I guess this would solve your probs

<input type="radio" name="type" id='frsradio'> Fresher
<input type="radio" name="type" id='expradio'> Experienced <br>

<input type="text" class='txbx' hidden="true"/> <br/>
 <input type="text" class='txbx' hidden="true"/> <br/>
<input type="text" class='txbx' hidden="true"/> <br/>

   $(function() {
        $('#expradio').click(function() {
            $('.txbx').attr('hidden',false);
        });           
        $('#frsradio').click(function() {
            $('.txbx').attr('hidden',true);
        });
    });

WORKING jsfiddle

See there is no unique identity available for your html elements, i just given this code by thinking in a generic manner.

Try,

$('input[name="type"]:eq(1)').change(function(){
     $('input[type="text"]').toggle(this.checked);
});

<input type="radio" name="type" onClick ="radio"> Fresher
<input type="radio" name="type" onClick ="radio">  Experienced 

on click of radio button experienced i want to display these 3 text box.

<input type="text"  hidden="true" class="text"/> <br/>
 <input type="text" hidden="true" class="text"/> <br/>
<input type="text"  hidden="true" class="text"/> <br/>

and javascript:-

<script>
 function radio()
{
     var result = document.getElementsByClassName('text'").style.display="none";

}
</script>

Try this

<input type="radio" name="type" value="fresher"> Fresher
<input type="radio" name="type" value="exp"> Experienced 

<br/>

<input class="box" type="text"  hidden="true"/> <br/>
<input class="box" type="text" hidden="true"/> <br/>
<input class="box" type="text"  hidden="true"/> <br/>

Script

$("input[type='radio']").on('change',function(){
if($(this).val() == "exp")
   $('.box').show('slow');
else
    $('.box').hide();
});

DEMO

Try this....

<input type="radio" name="type" id="fresh"> Fresher
<input type="radio" name="type" id="exp"> Experienced 
<input type="text" class="hid" hidden="true"/> <br/>
<input type="text" class="hid" hidden="true"/> <br/>
 <input type="text" class="hid"  hidden="true"/> <br/>

 $("#fresh").change(function(){
     $('.hid').css("style","display:none");  
 });

 $("#exp").change(function(){
     $('.hid').css("style","display:block");  
 });

For default hide the text boxes In OnRender Complete Method you need hide the three textbox for that you put the below code.

                    $("#textbox 1").hide();
                    $("#textbox 2").hide();
                    $("#textbox 3").hide();

You need to write the code in Radio button on change.

 Using the Id get the value of radio button

                    var val=$('#radioId').val;

                      if(val=='Fresher')
        {
                    $("#textbox 1").show();
                    $("#textbox 2").show();
                    $("#textbox 3").show();
                    }
                   else if (val=='Experienced'){

                    $("#textbox 1").hide();
                    $("#textbox 2").hide();
                    $("#textbox 3").hide();

                     }