show and hide radiobuttonlist on checked property of checkbox

show and hide radiobuttonlist on checked property of checkbox

In my program . there is checkbox(id-cbMain), a radiobuttonlist(intially hidden, id-rbSub), a radiobuttonlist(initially hidded,  id-rbchild).
I want, when cbMain is checked, then rbSub should be visible, and if a particular radiobutton of rbSub is checked the only rbChild should be visible. as soon as checkbox is unchecked both the radiobutton list should be hidden.
  2. <ul>
  3.     <li>
  4.         <input type="checkbox" id="cbChk">Main CheckBox</input>
  5.     </li>
  6.     <li id="liSub" class="hide">
  7.         <input type="radio" name="rbSub" class="hide" id="rbSub_0">Optional</input>
  8.         <input type="radio" name="rbSub" class="hide" id="rbSub_1">Cumplusry</input>
  9.     </li>
  10.      <li id="liChild" class="hide">
  11.          <input type="radio" name="rbChild" class="hide" id="rbSub_0">Child</input>
  12.          <input type="radio" name="rbChild" class="hide" id="rbSub_1">Spouse</input>
  13.     </li>
  14.     
  15. </ul>

my cssClass
  2. .hide {
  3.             display:none;
  4.         }
i want when the Compulsory radiobutton is checked the rbChild should be visible, but as soon as i checked Optional radiobutton, rbChild should be hidden.
i don't want to use addclass and remove class function in jquery.

jsfiddle link
http://jsfiddle.net/Amit12x/W9nYG/