j查询：在按键时在两个单选按钮之间切换

Question

当用户按下特定键（在本例中为“d”）时，我需要在两个单选按钮之间切换选中的值，但只能让它在一个方向上工作。网页：          <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);  };}但这只会将收音机从“关闭”切换到“打开”一次，并且不会再次返回到“关闭”。我尝试了很多变化，我找不到比这更好的东西了。

Answer 1

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

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 语句的测试部分中设置属性，这会导致每次都设置这些属性，而不是检查它们是否已设置。

Answer 2

如果你有两个无线电输入，你可以把你的代码简化成这样：

function toggleDarkModeRadio() {

  $('input[type="radio"]').not(':checked').prop("checked", true);

}

document.addEventListener("keydown", event => {

  if (event.key != 'd')

    return;

  toggleDarkModeRadio();

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

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

Answer 3

您并没有真正测试单选按钮是否有效，而是在条件中将它们设置为单选按钮。checkedcheckedif

并且，正如@charlietfl在下面解释的那样，将s转换为1：if()if()

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

}

这可以缩短为：

$('input[name="dark-mode"]:not(:checked)').prop('checked', true);