86

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

http://jsfiddle.net/2Bd32/

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

6 回答 6

136

您可以在此处和此处引用 W3C 作为您的来源。

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

  • 焦点可以通过以下方式移动到广播组：
    • Tab 键
    • 针对标签的访问密钥或助记符
    • 激活标签（通过辅助技术机制）
  • Tab 键在单选按钮组和其他小部件之间移动焦点。
  • 当焦点在组上并且没有选择单选按钮时：
    • Tab 键将焦点移动到组中的第一个单选按钮，但不选择单选按钮。
    • Shift+Tab 键将焦点移动到组中的最后一个单选按钮，但不选择单选按钮。
  • 当焦点移动到选中单选按钮的组时，按 Tab 和 Shift+Tab 键将焦点移动到选中的单选按钮。
  • 向上箭头和向下箭头键移动焦点和选择。
    • 向上箭头键通过组中的单选按钮向前移动焦点和选择。如果第一个单选按钮具有焦点，则焦点和选择将移动到组中的最后一个单选按钮。
    • 向下箭头键通过组中的单选按钮向后移动焦点和选择。如果最后一个单选按钮有焦点，则焦点和选择移动到组中的第一个单选按钮。*空格键按下检查当前具有焦点的单选按钮。
  • 重新进入组时，焦点返回到先前焦点的点（带有选择集的项目）。
  • 按 T​​ab 键退出组并将焦点移动到下一个表单控件。
  • 按 Shift+Tab 键退出组并将焦点移动到上一个表单控件。
于 2013-01-14T16:44:31.163 回答
18

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

于 2013-01-14T16:38:23.190 回答
6

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

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

于 2019-03-12T17:33:11.167 回答
1

如果您使用的是 angularjs，您可以ng-model通过使用 sameng-model和remove 直接控制单选按钮name。

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

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

于 2017-06-30T08:56:23.917 回答
-1

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

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

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

于 2019-01-10T15:49:54.947 回答
-1

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

于 2021-05-04T21:33:55.110 回答