CODEWITHSUNDEEP
javascriptjquery
Alex
Alex

Reputation: 206

Change content based on radio button selected

Here are my radio buttons:

<div style="float: left; margin-top: 35px; margin-left: 38px;">
    <input type="radio" name="cat" class="styled" value="jersey" />
</div>
<div style="float: left; margin-left: 58px; margin-top: 35px;">
    <input type="radio" name="cat" class="styled" value="shorts" />
</div>
<div style="float: left; margin-left: 58px; margin-top: 35px;">
    <input type="radio" name="cat" class="styled" value="shirts" />
</div>
<div style="float: left; margin-left: 58px; margin-top: 35px;">
    <input type="radio" name="cat" class="styled" value="reversible" />
</div>
<div style="float: left; margin-left: 88px; margin-top: 35px;">
    <input type="radio" name="cat" class="styled" value="outerwear" />
</div>
<div style="float: left; margin-left: 88px; margin-top: 35px;">
    <input type="radio" name="cat" class="styled" value="helmets" />
</div>
<div style="float: left; margin-left: 68px; margin-top: 35px;">
    <input type="radio" name="cat" class="styled" value="other" />
</div>

I've tried multiple jquery solutions where if a certain radio button is selected, it will display unique content for that radio button. However, all of my attempts have failed and I am really not sure why (I do have other jquery scripts running, maybe conflicts?)

So, for example...

If radio button "cat" has a value of "helmets" selected, I'd like to display the content for helmets. If the value is changed to "other", let's do away with helmets and display the content for "other".

Thanks for any help!

Upvotes: 0

Views: 5872

Answers (2)

Saul Berardo
Saul Berardo

Reputation: 2600

Try the following:

$('input[name=cat]').change(function() {
   alert($(this).val()); 
});

If your code alert the right value, you can use a switch to add the content you want where you want. If the result is not as expected, you'll need to provide us more details to find out what is going on.

Upvotes: 0

Brandon J. Boone
Brandon J. Boone

Reputation: 16472

Something like this?

Example

JS

$('input[type=radio]').click(function(){
    $('.area').hide();
    $('#' + $(this).val()).show(); 
});

CSS

.area{
    display:none;
    background-color:yellow; 
    clear:both; 
}

HTML

<div style="float: left; margin-top: 35px; margin-left: 38px;"><input type="radio" name="cat" class="styled" value="jersey" /></div>
    <div style="float: left; margin-left: 58px; margin-top: 35px;"><input type="radio" name="cat" class="styled" value="shorts" /></div>
    <div style="float: left; margin-left: 58px; margin-top: 35px;"><input type="radio" name="cat" class="styled" value="shirts" /></div>
    <div style="float: left; margin-left: 58px; margin-top: 35px;"><input type="radio" name="cat" class="styled" value="reversible" /></div>
    <div style="float: left; margin-left: 88px; margin-top: 35px;"><input type="radio" name="cat" class="styled" value="outerwear" /></div>
    <div style="float: left; margin-left: 88px; margin-top: 35px;"><input type="radio" name="cat" class="styled" value="helmets" /></div>
    <div style="float: left; margin-left: 68px; margin-top: 35px;"><input type="radio" name="cat" class="styled" value="other" /></div>

<div class='area' id="jersey">jersey</div>
<div class='area' id="shorts">shorts</div>
<div class='area' id="shirts">shirts</div>
<div class='area' id="reversible">reversible</div>
<div class='area' id="outerwear">outerwear</div>
<div class='area' id="helmets">helmets</div>
<div class='area' id="other">other</div>

Upvotes: 1

Related Questions