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);
        }
      }
    });
  });
});

对于前两次点击和我所有的警报，脚本都能正常执行 return 正如您所期望的那样。但是，在第三次单击时，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*/;

jQuery 切换脚本只能工作两次

jQuery script for toggle only working twice

javascript

jquery

togglebutton