title: Clicking an anchor tag and returning the associated value of the checked
body: <p>I have 3 sets of radio buttons. On clicking a particular anchor with class "round" two things need to happen:</p>
  
  <ol>
  <li><p>Set of associated radio buttons need to be visible</p></li>
  <li><p>Return the value of the checked input for that particular element.</p></li>
  </ol>
  
  <p>I'm looking for a solution in plain JavaScript.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="radioset set1"&gt;
      &lt;a href="#" class="round"&gt;&lt;/a&gt;
      &lt;p class="name"&gt;John&lt;/p&gt;
      &lt;form class="input" style="display:none;"&gt;
          &lt;p&gt;&lt;input  type="radio"  value="0-19" name="john"&gt;0-19&lt;/p&gt;
          &lt;p&gt;&lt;input  type="radio"  value="20-39" name="john"&gt;20-39&lt;/p&gt;
          &lt;p&gt;&lt;input  type="radio"  value="40-59" name="john"&gt;40-59&lt;/p&gt;
          &lt;p&gt;&lt;input  type="radio"  value="60-100" name="john"&gt;60-100&lt;/p&gt;
      &lt;/form&gt;
  &lt;/div&gt;
  &lt;div class="radioset set2"&gt;
      &lt;a href="#" class="round"&gt;&lt;/a&gt;
      &lt;p class="name"&gt;Paul&lt;/p&gt;
      &lt;form class="input" style="display:none;"&gt;
          &lt;p&gt;&lt;input  type="radio"  value="0-19" name="paul"&gt;0-19&lt;/p&gt;
          &lt;p&gt;&lt;input  type="radio"  value="20-39" name="paul"&gt;20-39&lt;/p&gt;
          &lt;p&gt;&lt;input  type="radio"  value="40-59" name="paul"&gt;40-59&lt;/p&gt;
          &lt;p&gt;&lt;input  type="radio"  value="60-100" name="paul"&gt;60-100&lt;/p&gt;
      &lt;/form&gt;
  &lt;/div&gt;
  &lt;div class="radioset set3"&gt;
      &lt;a href="#" class="round"&gt;&lt;/a&gt;
      &lt;p class="name"&gt;Jack&lt;/p&gt;
      &lt;form class="input" style="display:none;"&gt;
          &lt;p&gt;&lt;input  type="radio"  value="0-19" name="jack"&gt;0-19&lt;/p&gt;
          &lt;p&gt;&lt;input  type="radio"  value="20-39" name="jack"&gt;20-39&lt;/p&gt;
          &lt;p&gt;&lt;input  type="radio"  value="40-59" name="jack"&gt;40-59&lt;/p&gt;
          &lt;p&gt;&lt;input  type="radio"  value="60-100" name="jack"&gt;60-100&lt;/p&gt;
      &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>JavaScript</strong></p>
  
  <pre><code>var circle = document.getElementsByClassName("round");
  var formInput = document.getElementsByClassName("input");
  
  function inputToggle(i){
      let open = false;
      let checked = false;
      circle[i].addEventListener('click', function(e){
          e.preventDefault();
          if(open) {
              open = false;
                  formInput[i].style.display = "none";
              }
              else {
                  open = true;
                  formInput[i].style.display = "block";
                  // how do i read the input of this set
              }
          });
      }
  // Calling the inputToggle function
  for(let i=0;i&lt;3;i++){
      inputToggle(i);
  }
  </code></pre>