Show hide list items with radio button selection

show hide list items with radio button selection

HTML

<form id="fruits" action="/" method="post" name="fruits">
    <label>
        <input id="orange-group" type="radio" name="fruit-group" value="orange" /> Orange</label>
    <label>
        <input id="apple-group" type="radio" name="fruit-group" value="apple" /> Apple</label>
    <label>
        <input id="banana-group" type="radio" name="fruit-group" value="banana" /> Banana</label>
</form>
<div id="default">I'll be gone when anything is checked!</div>
<div id="orange">This is my Orange!</div>
<div id="apple">This is my Apple!</div>
<div id="banana">This is my Banana!</div>

CSS

#orange, #apple, #banana {display:none;}

JavaScript

$('#fruits').click(function () {
    // Hide all
    $('#default,#orange,#apple,#banana').hide();

    // Show checked
    if ($('#orange-group').prop('checked')) {
        $('#orange').show();
    } else if ($('#apple-group').prop('checked')) {
        $('#apple').show();
    } else if ($('#banana-group').prop('checked')) {
        $('#banana').show();
    }
});