切换的jQuery脚本只工作两次

Question

当使用以下脚本点击切换时，我正在尝试更新应用程序中的设置：

$(function() {
$(".radio-switch").on('click', '#switch-units', function() {
// $("input").prop('disabled', true);
var currUnits = $("input[name='units']:checked").val();
var units;
alert(currUnits);
if (currUnits === 'km') {
$("input[id='km']").attr('checked', false);
$("input[id='miles']").attr('checked', true);
units = 'miles';
} else if (currUnits === 'miles') {
$("input[id='miles']").attr('checked', false);
$("input[id='km']").attr('checked', true);
units = 'km';
}
alert(units);
var data = {
username: '{{ username }}',
units: units
};
alert(data.username);
$.ajax({
url: '/api/settings/units',
type: 'POST',
dataType: 'json',
data: data,
success: function(data) {
// $("input").prop('disabled', false);
if (data.status === 'saved') {
// alert("units updated ! ");
}
if (data.status === 'invalid') {
alert(data.message);
}
}
});
});
});

脚本在前两次单击时都会正确执行，我的所有警报都会返回您所期望的结果。然而，在第三次单击时，currUnits和units变量都会报警为undefined。

我不知道问题出在哪里，我希望有人能给我指明正确的方向。提前谢谢。

HTML模板：

<span class="title">Units</span>
<div class="radio-switch">
<input type="radio" name="units" value="km" id="km" class="active-left" {% if settings is not null and settings.units=="KM" %}checked="checked" {% endif %}>
<input type="radio" name="units" value="miles" id="miles" {% if settings is null or settings.units=="MILES" %}checked="checked" {% endif %}>
<label for="km">Km</label>
<span id="switch-units" class="virtual-switch"></span>
<label for="miles">Miles</label>
</div>
</span>

Answer 1

对于已检查(或未检查(的集合，使用以下语法：

$("input[id='km']").prop('checked', true/*or false*/);

或

$("input[id='km']")[0].checked=true/*or false*/;