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() {&nbsp; if ($('#dark-mode-on').prop('checked')) {&nbsp; &nbsp; $('#dark-mode-off').prop('checked', true);&nbsp; &nbsp; return;&nbsp; };&nbsp; if ($('#dark-mode-off').prop('checked')) {&nbsp; &nbsp; $('#dark-mode-on').prop('checked', true);&nbsp; &nbsp; return;&nbsp; };}或者这个：function toggleDarkModeRadio() {&nbsp; if ($('#dark-mode-on').prop('checked')) {&nbsp; &nbsp; $('#dark-mode-off').prop('checked', true);&nbsp; }&nbsp; else if ($('#dark-mode-off').prop('checked')) {&nbsp; &nbsp; $('#dark-mode-on').prop('checked', true);&nbsp; };}另一个问题是使用在 if 语句的测试部分中设置属性，这会导致每次都设置这些属性，而不是检查它们是否已设置。

Answer 2

如果你有两个无线电输入，你可以把你的代码简化成这样：function toggleDarkModeRadio() {&nbsp; $('input[type="radio"]').not(':checked').prop("checked", true);}document.addEventListener("keydown", event => {&nbsp; if (event.key != 'd')&nbsp; &nbsp; return;&nbsp; toggleDarkModeRadio();});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><label>&nbsp; &nbsp;<input type="radio" id='dark-mode-on' name="dark-mode" />&nbsp; &nbsp;<span>On</span>&nbsp;</label><label>&nbsp; &nbsp;<input type="radio" id='dark-mode-off' name="dark-mode" checked />&nbsp; &nbsp;<span>Off</span>&nbsp;</label>

Answer 3

您并没有真正测试单选按钮是否有效，而是在条件中将它们设置为单选按钮。checkedcheckedif并且，正如@charlietfl在下面解释的那样，将s转换为1：if()if()if ( $('#dark-mode-on').prop('checked') ) {&nbsp; &nbsp; $('#dark-mode-off').prop('checked', true);} else if ( $('#dark-mode-off').prop('checked') ) {&nbsp; &nbsp; $('#dark-mode-on').prop('checked', true);}这可以缩短为：$('input[name="dark-mode"]:not(:checked)').prop('checked', true);