onchange event on radio button
<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>