问题描述
我正在尝试在同一页面上实现多个 radiogroups。尽管 name 和 form 是分开的，但单选按钮表现为一组 - 如果您在一组中单击，它会在另一组中取消选择。
<form id="rg1_label">
<ul class="radiogroup" id="rg1" role="radiogroup" aria-labelledby="rg1_label">
<li id="r1" tabindex="-1" role="radio" aria-checked="false">
<img role="presentation" src="https://picsum.photos/50/50/" /> 1
</li>
<li id="r2" tabindex="-1" role="radio" aria-checked="false">
<img role="presentation" src="https://picsum.photos/50/50/" /> 2
</li>
</ul>
</form>
<form id="rg2_label">
<ul class="radiogroup" id="rg2" role="radiogroup" aria-labelledby="rg2_label">
<li id="r3" tabindex="-1" role="radio" aria-checked="false">
<img role="presentation" src="https://picsum.photos/50/50/" /> 3
</li>
<li id="r4" tabindex="-1" role="radio" aria-checked="false">
<img role="presentation" src="https://picsum.photos/50/50/" /> 4
</li>
</ul>
</form>解决方法
您在这里误解了问题。首先，让我们省略术语 selected，它适用于 <option> 元素。可以选中或不选中单选按钮。
目前没有可以检查您的列表项。
当你点击一个时，因为他们有 tabindex="-1"，他们获得了焦点。
这意味着它们是用户当前与之交互的元素。如果用户按下了某个键，那么将在该元素上触发 keydown 和 keyup（以及已弃用的 keypress）事件。如果他们按 Tab，那么焦点将移动到下一个元素。为了表明该元素具有焦点，在大多数浏览器中都会给它一个视觉突出显示。
这与被检查不同。 aria-checked 属性不会改变。
tabindex 允许键盘交互，而 aria- 允许您将有关元素用途和当前状态的信息传达给屏幕阅读器和其他辅助技术。他们不会将元素变成真正的复选框。
您需要自己使用 JavaScript 处理各种事情，包括：
- 存储选中状态
- 选中另一个元素时取消选中当前选中的元素
- 当您想将数据用于某些目的时读取数据（例如作为表单数据提交到服务器）
- 更改
aria-属性以反映更新的状态
（可能还有其他一些事情，我不想在这里写一个详尽的列表）。
一般来说，使用真正的单选按钮比使用带有一堆 CSS、JS 和 ARIA 的非单选按钮更好（也更容易）的方法使它们表现得像真正的单选按钮.
,我想我找到了解决您问题的方法。如果它不起作用或者它不是您要找的东西，请告诉我，我会尝试找到其他东西。
<form id="rg1_label">
<ul class="radiogroup" id="rg1" role="radiogroup" aria-labelledby="rg1_label">
<li id="r1" tabindex="-1" role="radio" aria-checked="false">
<input type="radio" name="radiobroup">
<img role="presentation" src="https://picsum.photos/50/50/" /> 1
</li>
<li id="r2" tabindex="-1" role="radio" aria-checked="false">
<input type="radio" name="radiobroup">
<img role="presentation" src="https://picsum.photos/50/50/" /> 2
</li>
</ul>
<ul class="radiogroup" id="rg2" role="radiogroup" aria-labelledby="rg2_label">
<li id="r3" tabindex="-1" role="radio" aria-checked="false">
<input type="radio" name="radiobroup">
<img role="presentation" src="https://picsum.photos/50/50/" /> 3
</li>
<li id="r4" tabindex="-1" role="radio" aria-checked="false">
<input type="radio" name="radiobroup">
<img role="presentation" src="https://picsum.photos/50/50/" /> 4
</li>
</ul>
</form>
在这里，我不是将列表放入 2 个表单中，而是将它放入一个表单中，而是放入 2 个列表中。如果您能以 2 种形式告诉我为什么需要它，那会有所帮助。
,您可以修复它的另一种方法是使用 Javascript 和 if 语句，例如如果检查了这个，则 value = 如此等等。那可能会奏效。我还是不明白为什么你需要两种形式而不用一种？