为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

茅侃侃 2022-09-23 09:16:55

当用户按下特定键(在本例中为“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);

  };

}

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


我尝试了很多变化,我找不到比这更好的东西了。


查看完整描述

3 回答

?
天涯尽头无女友

TA贡献1523条经验 获得超9个赞

你的问题是,你的函数中的代码没有中断,所以当它进入时,如果它关闭,它会跳过第一个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 语句的测试部分中设置属性,这会导致每次都设置这些属性,而不是检查它们是否已设置。


查看完整回答
反对 回复 6天前
?
RISEBY

TA贡献1538条经验 获得超5个赞

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


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>


查看完整回答
反对 回复 6天前
?
慕容708150

TA贡献1515条经验 获得超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);


查看完整回答
反对 回复 6天前
  • 3 回答
  • 0 关注
  • 9 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信