选择单选按钮不工作时jQuery显示警告框

Question

我花了很多时间在下面的jQuery代码中，现在它只是在选择单选按钮时显示一个警告框;但是，我无法确定为什么我的功能根本没有执行。

我在这里做了一个jsfiddle： https://jsfiddle.net/LcJGd/192/

这是我到目前为止所得到的：

$(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>

感谢@ vihan1086我能够更改此代码并使上面的代码正常工作。我在这里更新了我的JSFiddle https://jsfiddle.net/LcJGd/208/

Answer 1

三个问题：

1

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

名称不正确，应该是：input[type=radio]

2：

你需要JSFiddle to＆＃34; onLoad＆＃34; （可能只是我）

3：

您有大写错误

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

需要：

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

3_years - ＆gt; 3_Years

<小时/> 要避免这种情况，请将事件设置为＆＃34;单击＆＃34;。将此if替换为：

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

这将自动生成警报

Working Fiddle

Answer 2

1. 选择器需要是类型而不是名称。
2. 您可以使用$（this）代替检查所有无线电按钮

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

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

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