你能浏览所有单选按钮吗？答案

【问题标题】：Can you tab through all radio buttons?你能浏览所有单选按钮吗？
【发布时间】：2012-12-28 15:44:44
【问题描述】：

我有一个单选按钮列表。当我浏览它们时，似乎只有第一个单选按钮或被选中的单选按钮将获得焦点，其余单选按钮将被跳过。复选框没有这个问题。

我很难向我的 QA 解释这不是错误。有人可以向我解释为什么会发生这种情况。

Soccer: <input type="checkbox" name="sports" value="soccer"  tabindex="1" /><br />
Football: <input type="checkbox" name="sports" value="football"  tabindex="2" /><br /> 

<input type="radio" name="num" value="3" tabindex="3">3<br>
<input type="radio" name="num" value="4" tabindex="4">4<br>
<input type="radio" name="num" value="5" tabindex="5">5<br>
<input type="radio" name="num" value="6" tabindex="6">6<br>
<input type="radio" name="num" value="7" tabindex="7">7<br>

Baseball: <input type="checkbox" name="sports" value="baseball"  tabindex="8"  /><br /> 
Basketball: <input type="checkbox" name="sports" value="basketball"  tabindex="9"  />

【问题讨论】：

对我来说似乎是您的浏览器。你使用的是什么浏览器？你在其他浏览器上试过吗？
试过firefox、ie9和chrome
请记住，“修复”默认行为往往会导致臭名昭著的错误......聪明点……
对我来说，在无线电 btns 上具有（单独的）名称属性是解决方案。

标签： html radio-button

【解决方案1】：

具有一个名称的单选按钮就像单个控件（如输入或选择），您可以使用箭头键更改其值，Tab 键将焦点移动到另一个控件。

【讨论】：

【解决方案2】：

您可以引用 W3C 作为您的来源，here 和 here。

本质上，单选按钮是一个作为单个元素起作用的组，因为它只保留一个值。切换到单选组将带您进入第一个项目，然后使用箭头键在组内导航。

焦点可以通过以下方式移动到无线电组：

Tab 键

针对标签的访问密钥或助记符

激活标签（通过辅助技术机制）

Tab 键在单选按钮之间移动焦点组和其他小部件。

当焦点集中在组上并且当没有选择单选按钮时：

Tab 键按下移动焦点到组中的第一个单选按钮，但不选择单选按钮。

Shift+Tab 键将焦点移动到最后一个收音机组中的按钮，但不选择单选按钮。

当焦点移动到单选按钮所在的组时选中，按 Tab 和 Shift+Tab 键将焦点移至收音机选中的按钮。

向上箭头和向下箭头键移动重点和选择。

向上箭头键可移动焦点和通过组中的单选按钮向前选择。如果第一个单选按钮有焦点，然后焦点和选择移到最后组中的单选按钮。

向下箭头键移动焦点并通过组中的单选按钮向后选择。如果最后一个单选按钮有焦点，然后焦点和选择移动到组中的第一个单选按钮。 *空格键按下检查当前具有焦点的单选按钮。

何时重新进群，焦点回到之前的焦点点（带有选择集的项目）。

按 Tab 键退出组并将焦点移动到下一个表单控件。

按下 Shift+Tab 键退出组并将焦点移至上一个表格控制。

【讨论】：

我写了一个jQuery plugin 和一个Angular Directive 应该可以通过TAB 使任何一组单选按钮单独聚焦。可能对某人有用。 :)
当组中还没有选择电台时，是否可以勾勒出电台组？

【解决方案3】：

如果您使用的是 angularjs，您可以直接使用 ng-model 控制单选按钮，方法是使用相同的 ng-model 并删除 name。

<input type="radio" value="0" ng-model="status">
<input type="radio" value="1" ng-model="status">

现在，除了 Tab 按下之外的另一个优势是，您可以首先通过单选按钮进行对焦，而无需实际选择它。然后您可以按 空格 进行选择。

【讨论】：

【解决方案4】：

如果您将Angular Material 用于您的应用程序，您可以通过向每个<mat-radio-button> 添加tabindex 以跨浏览器 兼容的方式启用单选按钮选项卡：

<mat-radio-button [tabindex]="0">

否则，您将无法在 Safari 中选择单选按钮（因为这是默认浏览器行为 - 单击 here 进行讨论）。

【讨论】：

【解决方案5】：

不确定这是否仍然是任何人的问题，但我找到了解决方案。如上所述，这不是错误，这是默认行为。我们只需要考虑如何以不同的方式与网站交互。当您进入一组单选对象时，您需要使用箭头键在该组输入中导航，然后使用 Tab 或 shift+tab 退出该组输入。

https://www.w3.org/TR/wai-aria-practices/examples/radio/radio-1/radio-1.html

【讨论】：

【解决方案6】：

我在任何地方都找不到答案，只能找到部分解决方案或谜题，所以我决定弄清楚并证明它是可行的。当您运行下面的 sn-p 时，不要选择单选按钮，而是单击它们附近，然后按 Tab 键，您将看到它选择了第一个。然后它将选择第二个和第三个等。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
    <div id="buttonArea" style="width:100%;height:100%;">
        <label>Audi E-Tron</label><input type='radio' id='car1' name='car' value='Audi E-Tron'>
        <label>Bolt EV</label><input type='radio' id='car2' name='car' value='Bolt EV'>
        <label>Leaf EV</label><input type='radio' id='car3' name='car' value='Leaf EV'>
        <label>Tesla Model 3</label><input type='radio' id='car4' name='car' value='Tesla Model 3'>
    </div>
</body>
</html>

<script>
$(document).keydown(function(event) {

var car1 = document.getElementById("car1");
var car2 = document.getElementById("car2");
var car3 = document.getElementById("car3");
var car4 = document.getElementById("car4");

// 9 represents the tab keycode of the document keydown event. 

event.preventDefault(); // this prevents the tab from doing its default action.

    if(event.keyCode == 9 && car1.checked == false && car2.checked == false && car3.checked == false && car4.checked == false) {         
        car1.checked = true; // This checks the radio option.
    }
    else if (event.keyCode == 9 && car1.checked == true) { 
        car2.checked = true;
    }
    else if (event.keyCode == 9 && car2.checked == true) { 
        car3.checked = true;
    }
    else if (event.keyCode == 9 && car3.checked == true) { 
        car4.checked = true;
    }
    else if (event.keyCode == 9 && car4.checked == true) { 
        car1.checked = true;
    }

    car1.blur();    car2.blur();    car3.blur();    car4.blur();
})
</script>

【讨论】：

嘿，伙计，所以您的回答与问题有关，但我不会要求人们对您的回答提供反馈。请记住，我们使用论坛来回答开发人员的问题。（codereview.stackexchange.com
别担心，每个人都从某个地方开始，你在正确的轨道上。 :)