title: onchange event on radio button
body: <p>I am trying to achieve something simple. Basically I have 3 radio groups and onchange of either one of those group, I want to get the values of all the radio groups and display on an alert box.</p>
  
  <p>My code is as follows</p>
  
  <p>html</p>
  
  <pre><code>&lt;input type="radio" name="ac" value="yes"&gt; YES
  &lt;input type="radio" name="ac" value="no"&gt; NO
  &lt;br&gt;
  &lt;input type="radio" name="tier" value="normal"&gt; normal
  &lt;input type="radio" name="tier" value="deluxe"&gt; deluxe
  &lt;br&gt;
  &lt;input type="radio" name="cap" value="big"&gt; big
  &lt;input type="radio" name="cap" value="small"&gt; small
  </code></pre>
  
  <p>js</p>
  
  <pre><code>$("input[type=radio]").on("change",function(){
      var ac=$("input[type=radio][name=ac]").val();
      var tier=$("input[type=radio][name=tier]").val();
      var cap=$("input[type=radio][name=cap]").val();
  
      alert(ac+" "+tier+" "+cap);
  });
  </code></pre>
  
  <p>I have a jsfiddle here too <a href="https://jsfiddle.net/5fg6by8m/" rel="nofollow">https://jsfiddle.net/5fg6by8m/</a></p>
  
  <p>ON the fiddle, it seems like the event doesn't fire at all, while on my localhost server using mozilla to browse I always get the values of the first items of each group in my alert box (yes normal big). I might be doing some silly mistake. Please help me correct this.</p>
  
  <p>Thanks in advance...</p>
  
  <p>edit
  corrected fiddle
  <a href="https://jsfiddle.net/5fg6by8m/4/" rel="nofollow">https://jsfiddle.net/5fg6by8m/4/</a></p>