CODEWITHSUNDEEP
javascriptjquery
Nasser
Nasser

Reputation: 159

radio group show items on selected value jQuery

have a radio group on change would like to show labels that arrt includes selected radio value, here is my code 

<label class="radio"><input name="tour_type" type="radio" value="reg" />Regular</label>
<label class="radio"><input type="radio" name="tour_type" value="div" />Diving</label>
<label class="radio"><input type="radio" name="tour_type" value="qud"  />Quad</label>
<label class="radio"><input type="radio" name="tour_type" value="prv" />Privat</label>

<label class=" priceswrapper" style="display:none;" tour_type="reg, div">Pax<input type="text" /></label>
<label class=" priceswrapper" style="display:none;" tour_type="reg, div">Kids<input type="text" /></label>
<label class=" priceswrapper" style="display:none;" tour_type="reg, div">Intro Dive<input type="text" /></label>
<label class=" priceswrapper" style="display:none;" tour_type="reg, div">Professional Dive<input type="text" /></label>
<label class=" priceswrapper" style="display:none;" tour_type="qud">Single quad<input type="text" /></label>
<label class=" priceswrapper" style="display:none;" tour_type="qud">Doubble quad<input type="text" /></label>
<label class=" priceswrapper" style="display:none;" tour_type="qud">Private quad<input type="text" /></label>
<label class=" priceswrapper" style="display:none;" tour_type="prv">Private<input type="text" /></label>

and this is my jQuery code 

$('input[name=tour_type]').change(function(){
        var tour_type= $(this).val();

        $('.priceswrapper', function(){
            var prices_attr = [$(this).attr('tour_type')];
            if ($.inArray(tour_type, window.prices_attr) !== -1){
                $(this).show();
                }


            });
        });

Upvotes: 0

Views: 80

Answers (2)

Indranil Mondal
Indranil Mondal

Reputation: 2857

Try this:-

$('input[name=tour_type]').change(function(){
    var tour_type= $(this).val();

    var divs = $('.priceswrapper')
    $.each(divs, function(index,item){

        if($(item).attr('tour_type').split(',').indexOf(tour_type)){
        $(item).show();
        }else{
         $(item).hide();
        }

        });
    });

Demo :- http://jsfiddle.net/shrshcqn/

Upvotes: 0

Bhushan Kawadkar
Bhushan Kawadkar

Reputation: 28513

Try this : on change of radio button iterate through all priceswrapper using .filter(). Check the value of tour_type and if exist then make it visible using .show()

$(function(){
  $('input[name=tour_type]').change(function(){
       var tour_type= $(this).val();
    $('.priceswrapper').hide();
    $('.priceswrapper').filter(function(){
       var tourType = $(this).attr('tour_type');
       return tourType.indexOf(tour_type)!=-1;
    }).show();
  });
});

DEMO

Upvotes: 2

Related Questions