javascript - jQuery:按键时在两个单选按钮之间切换

Question

当用户按下特定键(在本例中为“d”)时，我需要在两个单选按钮之间切换选中的值，但只能使其在一个方向上工作。

HTML:

          <label>
            <input type="radio" id='dark-mode-on' name="dark-mode" />
            <span>On</span>
          </label>
          <label>
            <input type="radio" id='dark-mode-off' name="dark-mode" checked />
            <span>Off</span>
          </label>

JS:(这是在按键时调用的)

function toggleDarkModeRadio() {
  if ($('#dark-mode-on').prop('checked', true)) {
    $('#dark-mode-off').prop('checked', true);
  };
  if ($('#dark-mode-off').prop('checked', true)) {
    $('#dark-mode-on').prop('checked', true);
  };
}

但这只会将 radio 从“关闭”切换到“打开”一次，并且不会再次返回“关闭”。

我尝试了很多变体，但没有比这更好的方法了。

谢谢

Answer 1

这里的问题是函数中的代码没有中断，所以当它进入时，如果它关闭，它会跳过第一个 if，然后进入第二个 if。但是，如果它进入该函数并且当前处于打开状态，它将进入第一个 if，将其设置为关闭，然后当它进入第二个 if 时，它现在处于关闭状态，因此它会再次打开它。您可以调整您的函数以使用 else if 或这样的 return:

function toggleDarkModeRadio() {
  if ($('#dark-mode-on').prop('checked')) {
    $('#dark-mode-off').prop('checked', true);
    return;
  };
  if ($('#dark-mode-off').prop('checked')) {
    $('#dark-mode-on').prop('checked', true);
    return;
  };
}

或者这个:

function toggleDarkModeRadio() {
  if ($('#dark-mode-on').prop('checked')) {
    $('#dark-mode-off').prop('checked', true);
  }
  else if ($('#dark-mode-off').prop('checked')) {
    $('#dark-mode-on').prop('checked', true);
  };
}

另一个问题是使用 if 语句的测试部分设置属性，这会导致每次都设置这些属性，而不是检查它们是否已设置。