CODEWITHSUNDEEP
javascriptjqueryajax
ashis
ashis

Reputation: 381

dynamic show and hide of radio buttons based on output of another radio button

I'm working with the following HTML:

<div class="form">
    <input type="radio" name="type" value="100" checked="checked" />100
    <input type="radio" name="type" value="200" />200
    <input type="radio" name="type" value="300" />300
    <input type="radio" name="type" value="other" />other
</div>


<input type="radio" name="img" value="100"/> img1
<input type="radio" name="img" value="200"/> img2
<input type="radio" name="img" value="100"/> img3
<input type="radio" name="img" value="200"/> img4
<input type="radio" name="img" value="300"/> img5
<input type="radio" name="img" value="100"/> img6
<input type="radio" name="img" value="200"/> img7
<input type="radio" name="img" value="300"/> img8
<input type="radio" name="img" value="200"/> img9
<input type="radio" name="img" value="100"/> img10

What i'm trying to achieve is jQuery show or hide of bottom radio buttons matching values of top radio buttons, i.e. if a user clicks on top radio button then the list will displayed based on the value of that button user checked. I found many similiar answers but all were based on either classes or divs. None told about matching values. So I had to post this.

I've also created a Fiddle with this code.

Upvotes: 0

Views: 596

Answers (1)

Nope
Nope

Reputation: 22339

You can do it similar to the below but note that the text for each radio button like img1, img2, etc won't hide as they are not inside an element which can be selected along with the radio button.

var imageRadioButtons = $('[name="img"]');

$('[name="type"]').click(function(){
    var selectedValue = this.value;
    imageRadioButtons.show();

    imageRadioButtons.filter(function(){
        return this.value === selectedValue;
    }).hide();
})

DEMO 1 - Hide matching radio buttons

Edit

so if they are to be hide then each shall be inside one div id element? or div class element?

You can for example wrap them into a span like this:

<div class="form">
    <input type="radio" name="type" value="100" checked="checked" />100
    <input type="radio" name="type" value="200" />200
    <input type="radio" name="type" value="300" />300
    <input type="radio" name="type" value="other" />other
</div>


<input type="radio" name="img" value="100"/> <span>img1</span>
<input type="radio" name="img" value="200"/> <span>img2</span>
<input type="radio" name="img" value="100"/> <span>img3</span>
<input type="radio" name="img" value="200"/> <span>img4</span>
<input type="radio" name="img" value="300"/> <span>img5</span>
<input type="radio" name="img" value="100"/> <span>img6</span>
<input type="radio" name="img" value="200"/> <span>img7</span>
<input type="radio" name="img" value="300"/> <span>img8</span>
<input type="radio" name="img" value="200"/> <span>img9</span>
<input type="radio" name="img" value="100"/> <span>img10</span>

Then you can adjust the script to always hide the next span element following the current input along with it, similar to this:

imageRadioButtons.filter(function(){
    return this.value === selectedValue;
}).hide().next('span').hide();

DEMO 2 - Hide matching radio buttons and text

In addition I updated the script for DEMO 2 to also hide the matching buttons when initially loaded. You can adjust anything else you need from there.

Full script from DEMO 2:

var typeRadioButtons = $('[name="type"]');
var imageRadioButtons = $('[name="img"]');

var hideSelected = function(selectedValue){
    imageRadioButtons.filter(function(){
        return this.value === selectedValue;
    }).hide().next('span').hide();
};

var initValue = typeRadioButtons.filter(function(){
    return this.checked;
})[0].value;

hideSelected(initValue);

typeRadioButtons.click(function(){
    var selectedValue = this.value;
    imageRadioButtons.show().next('span').show();

    hideSelected(selectedValue);
});

Upvotes: 1

Related Questions