如何解决选中单选按钮集的选项卡
我正在尝试设置使用 Tab 键选中的单选按钮。我已经解决了之前提出的一些问题,但似乎找不到有效的答案。
我有一个带有 2 个单选按钮的表单,我最接近完成这项工作的是使用 focusin 和 focusout 功能,但唯一的问题是一旦它聚焦,就不会选中单选按钮。
表单位于模态 (#userschoices) 内
<div class="form-check">
<input class="form-check-input" type="radio" name="choice1" id="selectchoice" value="1" tabindex="1" checked="">
<label class="form-check-label" for="choice1" aria-label="choice 1">
choice 1
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="choice2" id="selectchoice" tabindex="2" value="0">
<label class="form-check-label" for="choice2" aria-label="choice 2">
choice 2
</label>
</div>
js如下
$("input:radio").on("keydown",function (e) {
if($("#userschoices").is(":visible")) {
if (e.keyCode === 9) {
$(this).next().focus().attr("checked","checked");
}
}
});
我还尝试了以下方法,即在聚焦时取消选中收音机,还有提交和取消按钮,也可以在使用 Tab 键时访问这些按钮。
if($("#userschoices").is(":visible")) {
if (e.keyCode === 9) {
$("input:radio").focusin(function(e) {
$(this).attr("checked","checked");
});
$("input:radio").focusout(function(e) {
$(this).removeAttr("checked","checked");
});
}
}
我最终做了这样的事情,它的工作原理和预期的一样,虽然有点俗气,如果有人有更好的方法,请随时回答
下面是我最终使用的代码
$(document).on("keydown","input[type=radio]",function(e) {
if($("#userschoices").is(":visible")) {
if (e.keyCode === 9) {
var current = $("input[type=radio]:focus");
current.attr("checked","checked");
$("input[type=radio]").not(this).attr("checked",false);
}
}
});
TIA
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。