three radio buttons with sub radio buttons need to hide or show the div using jquery

Question

I am working on jQuery hide or show function. I have three radio buttons and two sub radio button will be available initially if user select the first radio button and user select children first / second radio button one div will be shown in the second scneario if user select second radio button / third radio button from the parent and sub radio button second div should come. I am not getting how to do the if condition

Here is the fiddle link

Here is my HTML code

<input type="radio" value="one" checked name="number" />One
<input type="radio" value="two" name="number" />two
<input type="radio" value="three" name="number" />three
<br/>
<input type="radio" checked value="onea" name="numbers" />one A
<input type="radio" value="twoa" name="numbers" />two A
<br/>
<div class="first">First</div>
<div class="second">second</div>
<div class="third">third</div>

Here is my current jquery code

   $(".second,.third").hide();
$('input[type="radio"]').change(function () {
    if ($(this).val() === 'onea'  || 'twoa') {
        $(".first").show();
    }
});

for the first radio button was working perfectly as expected but not for second third radio button

this is what i want

for example there are two scenarios 1) by default the one radio button was and one A radio button was checked the first div will show 2) if the user select two radio button / three radio button and sub one A / two A second div will show I am not getting the second scenarios

Thanks in advance

Answer 1

Try this.. jsfiddle

                    <input type="radio" value="one" name="number" />One
        <input type="radio" value="two" name="number" />two
        <input type="radio" value="three" name="number" />three
        <br/>
        <input type="radio" checked value="onea" name="numbers" id="first" />one A
        <input type="radio" value="twoa" name="numbers" id="second"/>two A
        <br/>
        <div class="first divcont">First</div>
        <div class="second divcont">second</div>
        <div class="third divcont">third</div>

        $(".second,.third").hide();
        $('input[type="radio"]').on("change",function () {
            var FVal = $('input[name="number"]:checked').val();
            console.log(FVal);
            if(FVal!='one'){
                $(".divcont").hide();
                $(".second").show();
            }else{
                 $(".divcont").hide();
                $(".first").show();

            }
        });