Question

我有一个单选按钮列表。当我通过它们进行选项卡时，似乎只有第一个单选按钮或被选中的单选按钮才会聚焦，其余的单选按钮将被跳过。复选框没有这个问题。

我很难向我的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"  />

Answer 1

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

基本上，单选按钮是一个充当单个元素的组，因为它只保留一个值。通过标签指向收音机组，您将转到第一个项目，然后使用您在组内导航的箭头键。

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

Tab键

以标签为目标的访问键或助记符

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

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

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

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

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



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

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

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

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

何时   重新进入该组，焦点返回到前一个焦点   （带选择集的项目）。

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

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

Answer 2

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

Answer 3

如果您使用的是angularjs，则可以使用ng-model并name删除<input type="radio" value="0" ng-model="status"> <input type="radio" value="1" ng-model="status">，直接使用{{1}}来控制单选按钮。

{{1}}

现在，除了标签按钮之外，还有一个优点是您可以首先通过单选按钮进行对焦，而无需实际选择它。然后，您可以按 space 。

进行选择

Answer 4

如果您在应用程序中使用Angular Material，则可以通过向每个{{1}添加tabindex来实现跨浏览器兼容的单选按钮制表}：

<mat-radio-button>

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

Answer 5

我在任何地方都找不到答案，只能找到解决方案或谜题的一部分，所以我决定弄清楚并证明它是可行的。当您运行下面的代码段时，不要选择单选按钮，而是单击它们附近，然后按 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>

你可以通过所有单选按钮标签吗？

5 个答案: