Firefox 单选按钮怪异答案

【问题标题】：Firefox Radio Button WeirdnessFirefox 单选按钮怪异
【发布时间】：2010-12-09 19:30:21
【问题描述】：

我有一个包含很多收音机组的表格。每个无线电都有一个唯一的 ID，并且与组中的其他无线电具有相同的名称。该页面验证为 XHTML 过渡。

在 IE6 和 7、Opera、Safari 和 Chrome 中测试，它的工作方式与您通过鼠标或键盘输入所想象的完全一样。

在 FireFox 中它变得疯狂。单击组中的任何无线电会设置检查组中的第一个无线电。双击收音机通常会选择它。有人见过这个吗？

样本组如下所示：

<input type="radio" name="upAndDown_1" id="upAndDown_11" value="Y"  /> Y <br />
<input type="radio" name="upAndDown_1" id="upAndDown_12" value="N"  checked="checked" /> N<br />
<input type="radio" name="upAndDown_1" id="upAndDown_13" value="NA"  /> NA

phonmomenon 可以在这里测试：http://www.nolaflash.com/stackoverflow/firefox_and_radios.html

任何建议表示赞赏。

【问题讨论】：

标签： firefox radio-button

【解决方案1】：

确实是周围的 <label> 标记导致了 Firefox 问题（尽管它是有效的 html）。这应该可以解决问题：

<input type="radio" name="upAndDown_2" id="upAndDown_21" value="Y"/><label for="upAndDown_21">Y</label><br/>
<input type="radio" name="upAndDown_2" id="upAndDown_22" value="N"/><label for="upAndDown_22">N</label><br/>
<input type="radio" name="upAndDown_2" id="upAndDown_23" value="NA" checked="checked"/><label for="upAndDown_22">NA</label>

【讨论】：

【解决方案2】：

哇！我的设计师用一个标签包裹着每组收音机。消除标签标签修复了 FireFox 的怪异之处。

【讨论】：

是的，标签内的输入被视为将标签与输入相关联，就好像使用for="..." 将它们关联起来一样。这是 HTML 标准的一部分，但 IE 不支持。
如果您为收音机分配相同的名称和不同的 id，则会发生这种行为。