How to reset/uncheck radio button onclick event?

I have 2 radio button with 2 group.

The structure is like this

1. Main Radio 1
2. Main Radio 2

Under Main Radio 2, there’s two more sub radio button.

1. Main Radio 1
2. Main Radio 2
   • Sub Radio 1
   • Sub Radio 2

What am I doing is, in default stage, it will only show Main Radio 1 and Main Radio 2 button. When choose Main Radio 2, two sub radio button of Main Radio 2 appear.

When choose back to Main Radio 1, it will hide the list of Main Radio 2.

The one that I want to achieve is,

When click Main Radio 1, the selection that I made for Sub Radio 1 or Sub Radio 2, want to be uncheck / reset too.

I tried with this javascript, but no success.

document.getElementById("subradiobuttons").reset(); 

Please kindly help me the solutions. Thank you.

With Regards,

Answer

I think the best approach for a simple task like this does not needs a full JavaScript library like jQuery.

document.getElementById("main2").addEventListener("click", function()
{
    document.getElementById("subCheckButtons").style.opacity = 1;
}, false);
document.getElementById("main1").addEventListener("click", function()
{
    document.getElementById("subCheckButtons").style.opacity = 0;
    document.getElementById("sub1").checked = false;
    document.getElementById("sub2").checked = false;
}, false);

<input type="radio" id="main1" name="main" />
<input type="radio" id="main2" name="main" />
<div id="subCheckButtons" style="opacity:0;">
    <input type="radio" id="sub1" name="sub" class="subCheck" />
    <input type="radio" id="sub2" name="sub" class="subCheck" />
</div>

Or see the fiddle.