else statement not working

I'm kind of stuck on something...

my else statement doesn't seem to be working right.

<div class="main-options">
    <label class="main-label" for="main-options">Main Options:</label>
    <input class="option-a" type="radio" name="main-options">
    <label for="main-options">Option A</label>
    <input class="option-b" type="radio" name="main-options">
    <label for="main-options">Option B</label>
</div>

<div class="sub-options">
    <label class="sub-options-label" for="sub-options">Sub Options:</label>
    <input class="option-c" type="radio" name="sub-options">
    <label for="main-options">Option A</label>
    <input class="option-d" type="radio" name="sub-options">
    <label for="sub-options">Option B</label>
</div>

Javascript:

$('.option-b').click(function() {
    if ($(this).is(':checked')) {
         $('.sub-options').hide();
    }
    else {
        $('.sub-options').show();
    }
});

jsFiddle: http://jsfiddle.net/VcVYM/

My goal is to be able to click option B and hide the sub-options div. But when option B isn't :checked, I want the sub options to re-appear...

I've managed to get it hidden once option-b is checked, but my else statement doesn't seem to show the sub-options div when it's not checked.

Thanks for taking a look!

D

You need to add the click handler to both radio buttons

$('.option-b, .option-a').click(function() {
    if ($('.option-b').is(':checked')) {
         $('.sub-options').hide();
    }             
    else {
        $('.sub-options').show();
    }
});