CODEWITHSUNDEEP
jqueryhtmlcss
Rajesh
Rajesh

Reputation: 123

When I Select a Radio button, the respective content should display

I am having a set Radio buttons. When I select any one of the radio buttons, the respective block should open. Here is my Code, please help.

  <input type="radio" name="radioVal" id="tfn" value="tfn" />
  <input type="radio" name="radioVal" id="exempt" value="exempt"> 
  <input type="radio" name="radioVal" id="nrstatus" value="nrstatus"> 
  <input type="radio" name="radioVal" id="taxdec" value="taxdec">

My Jquery is:

if ($('input[name="radioVal"]:checked').val() == 'tfn'){ $('.tfn-ajax').show(); $('.exempt-ajax').hide(); $('.nrstatus-ajax').hide(); $('.taxdec-ajax').hide(); }
else if ($('input[name="radioVal"]:checked').val() == 'exempt'){
    alert('exempt');
    $('.tfn-ajax').hide();
    $('.exempt-ajax').show();
    $('.nrstatus-ajax').hide();
    $('.taxdec-ajax').hide();
}
else  if ($('input[name="radioVal"]:checked').val() == 'nrstatus'){
    alert('nrstatus');
    $('.tfn-ajax').hide();
    $('.exempt-ajax').hide();
    $('.nrstatus-ajax').show();
    $('.taxdec-ajax').hide();
}
else  if ($('input[name="radioVal"]:checked').val() == 'taxdec'){
    alert('taxdec');
    $('.tfn-ajax').hide();
    $('.exempt-ajax').hide();
    $('.nrstatus-ajax').hide();
    $('.taxdec-ajax').show();
}

.tfn-ajax, .exempt-ajax, .nrstatus-ajax, .taxdec-ajax are the classes which has some content. The above Jquery is an example for the 1st Radio Button(tfn).

Upvotes: 0

Views: 503

Answers (2)

GreyRoofPigeon
GreyRoofPigeon

Reputation: 18123

It can be much easier: Demo

$('input[name=radioVal]').change(function(){
    $(".box").hide();
    $("."+$(this).attr('id')+"-ajax").show();
});

Upvotes: 0

colestrode
colestrode

Reputation: 10658

I haven't seen all your markup, so here is an example that you could modify to meet your needs.

Attach a change handler to your radio buttons, then hide all the above divs, and show the one whose class corresponds to the checked radio's value:

$('input[type=radio][name=radioVal]').on('change', function () {
    var that = $(this),
        val = that.val();

    $('div.ajax').hide(); //hide all ajax divs, this is easier if they all share a class
    $('div.' + val + '-ajax').show(); //show the div that corresponds to this radio
});

Working Demo

Upvotes: 1

Related Questions