title: How to show/slide down a related radio button in javascript or jquery
body: <p>My question in title may not make sense but what I am trying to do is:</p>
  
  <p>When I click text1's radio button, the subtext1's radio button will show up. Then when text2's radio buttonis clicked, subtext2's radio button will show up, meanwhile hiding subtext1's radio button and uncheck subtext1's radio button if it is checked before. Element id here is created in sequence from backend. </p>
  
  <pre><code>&lt;form name="myForm"&gt;
      text1: &lt;input type="radio" id="r1" name="myRadio"  value="1" onchange="action()"/&gt;
        &lt;div&gt;subtext1: &lt;input type="radio" id="r1" name="mysubRadio"  value="11" /&gt;&lt;/div&gt;
      text2: &lt;input type="radio" id="r2" name="myRadio"  value="2" onchange="action() /&gt;
        &lt;div&gt;subtext2: &lt;input type="radio" id="r2" name="mysubRadio"  value="22" /&gt;&lt;/div&gt; 
  &lt;/form&gt;
  </code></pre>
  
  <p>I try to use </p>
  
  <pre><code>document.getElementById('r1').getElementByName('myRadio') 
  </code></pre>
  
  <p>to get specific radio button but it seems to be a bad syntax. </p>
  
  <p>Anyone can provide a clue how I can know the sub radio button to show with related parent radio button I checked in javascript?</p>