CODEWITHSUNDEEP
jquery
Jaystew
Jaystew

Reputation: 299

How do i display different radio button groups based on dropdown selection

I want to display one radio button group at a time based on a drop down selection. Below is my html showing several different radio button groups.

<div class="radioshow" id="whatlist">
    <div class="tooltip">
        <label class="radio">
            <input type="radio" name="media" value="interview" />
            <span>Wx Interview</span>
        </label>
    </div>
    <div class="tooltip">
        <label class="radio">
            <input type="radio" name="media" value="genq" />
            <span>General Q</span>
        </label>
    </div>
    <div class="tooltip">
        <label class="radio">
            <input type="radio" name="embrief" value="wxbrief" />
            <span>Wx Brief</span>
        </label>
    </div>
    <div class="tooltip">
        <label class="radio">
            <input type="radio" name="embrief" value="eventsppt" />
            <span>Event Sppt</span>
        </label>
    </div>
    <div class="tooltip">
        <label class="radio">
            <input type="radio" name="nws" value="coord" />
            <span>Coordination</span>
        </label>
    </div>
    <div class="tooltip">
        <label class="radio">
            <input type="radio" name="nws" value="backup" />
            <span>Backup Sppt</span>
        </label>
    </div>
</div>

Here is my jquery code. It seems like this should work, but no.

<script type="text/javascript">    
    $('.tooltip').addClass('dontshow');
    $('#select1').change(function () {
        var groupname = $(this).val();
        $('.tooltip input:radio[name=' + groupname + ']').removeClass('dontshow');
    });
</script>

Upvotes: 0

Views: 32

Answers (2)

Jaystew
Jaystew

Reputation: 299

I had to add a second $('.tooltip').addClass('dontshow'); to the .change function so that the radio buttons wouldn't "pile up" on successive drop down selections...

    $('.tooltip').addClass('dontshow');
    $('#select1').change(function () {
      $('.tooltip').addClass('dontshow');
        var groupname = $(this).val();
        $('input:radio[name=' + groupname + ']').closest('.tooltip').removeClass('dontshow');
    });

Upvotes: 0

Ibrahim Khan
Ibrahim Khan

Reputation: 20740

dontshow class is added to .tooltip. But you are removing it from radio button. Try like following.

$('.tooltip').addClass('dontshow');
$('#select1').change(function () {
    var groupname = $(this).val();

    //following line is changed 
    $('input:radio[name=' + groupname + ']').closest('.tooltip').removeClass('dontshow');        
});

Upvotes: 1

Related Questions