jQuery to display alert box when selecting radio button not working

Question

I have spent a lot of time in the following piece of jQuery code which for now its just supposed to display an alert box whenever a radio button is selected; however, I can't pinpoint why is my function not executing at all.

I have made a jsfiddle here: https://jsfiddle.net/LcJGd/192/

Here is what I got so far:

$(document).ready(function(){ 
$('input[name="years"]').change(function() {
     if($('#years_3_Years').is(':checked')) { 
     alert("36 Months"); 
   } else if ($('#years_4_Years').is(':checked')){
     alert("48 Months");
   } else if ($('#years_5_Years').is(':checked')){
     alert("60 Months");
   }
};
 );
}
);



<form id="plangen" action="/calculate" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="&#x2713;" /><input type="hidden" name="authenticity_token" value="JkGFl38I+e1Kc/JJFW1tIKdJAw7rGuDe6yeTKHLRDOjcI5f3yMDeQADZYGw3/ku2fuRJip0P2nAAPtFt/o1BvA==" />
<label for="amt">Car loan amount:</label>
<input type="text" name="amt" id="amt" /><br>
<label for="dp">Down Payment:</label>
<input type="text" name="dp" id="dp" /><br>
<label for="int">Annual Interest:</label>
<input type="text" name="int" id="int" /><br>

<input type="radio" name="years" id="years_3_Years" value="3 Years" />
<label for="years3_child">Will pay in 3 years</label><br>
<input type="radio" name="years" id="years_4_Years" value="4 Years" />
<label for="years4_child">Will pay in 4 years</label><br>
<input type="radio" name="years" id="years_5_Years" value="5 Years" />
<label for="years5_child">Will pay in 5 years</label><br>

<label for="resu">You will pay $ monthly:</label>
<input type="text" name="resu" id="resu" /><br>

<button type="button" id = "calc">Calculate</button>

Thanks to @vihan1086 I was able to change this code and make the code above work. I have updated my JSFiddle here https://jsfiddle.net/LcJGd/208/

Answer 1

Three problems:

1:

$("input[name=radio]").on("click", function () {

name isn't correct, it should be: input[type=radio]

2:

You need to JSFiddle to "onLoad" (Might just be me)

3:

You have capitalization errors

if($('#years_3_years').is(':checked')) { 

needs to be:

if($('#years_3_Years').is(':checked')) { 

3_years -> 3_Years

---

to avoid this, set the event to "click". Replace this if s with:

 if (/(?:(?:years_)\\d+(?:_Years))/i.test('years_4_Years')) { alert(parseInt($(this).attr('value').trim(), 10) * 12 + 'Months'); } 

That will automatically generate alerts

Working Fiddle

Answer 2

1. Selector needs to be type instead of name.
2. You can use $(this) instead of checking all radios buttons

https://jsfiddle.net/LcJGd/202/

$("input[type='radio']").on("change", function () {

     if($(this).is(':checked')) { 
         alert($(this).val())
   }
});