Javascript 关于onchange/onfocus的跨浏览器问题

我试图将

和

转换为一个按钮，单击该按钮后，将特定产品添加到购物车中。本例涉及一种产品，可能有多种变体（即产品为“牛仔牛仔裤”，变体为尺寸“26”、“27”、“28”）

HTML看起来像

<label for="radio_denim26">
  <span>26</span>
  <input type="radio" style="position:absolute;top:-30px;left:-30px;" value="denim26" id="denim26" checked="checked" onfocus="form.submit();" onchange="form.submit();" />
</label>

<label for="radio_denim27">
  <span>27</span>
  <input type="radio" style="position:absolute;top:-30px;left:-30px;" value="denim27" id="denim27" checked="checked" onfocus="form.submit();" onchange="form.submit();" />
</label>

<label for="radio_denim28">
  <span>28</span>
  <input type="radio" style="position: absolute;top:-30px;left:-30px;" value="denim28" id="denim28" checked="checked" onfocus="form.submit();" onchange="form.submit();" />
</label>

26
27
28

**

上的CSS用于隐藏单选按钮，使其不可见*

这在IE8、IE7和IE6中运行良好（令人惊讶！）它在Safari/Chrome中也可以运行。它在Firefox中不起作用。当我点击一个特定的变量，比如说“27”，它会将组中最后一个变量添加到购物车中，即“28”

---

最后要注意的一点是，如果我删除

onfocus=“form.submit（）；”

它在Firefox中运行良好，但在IE 7中不再如此。

您的单选按钮标签上可能应该有“name”属性。每个属性的名称应该相同，这样它们实际上就像单选按钮一样工作。

属性的标签需要指向输入的id。 这与它们的位置无关，它们可以隐藏在屏幕的另一侧。 只要标签的@for指向输入的@id，就可以开始了

即

28

查看示例

---

顺便说一句，不错的网站！：）

另外，请注意IED（至少IE6）没有正确理解a中的输入标记应该是标签的目标。您应该确保“for”属性准确地引用了相应输入（单选按钮）的“id”属性。在提供的链接中，for属性与ID属性不匹配。我临时想出了一个糟糕的解决方案，将样式（display:none；）应用于Firefox中的无线电输入，然后使用IE 8的浏览器目标-在无线电输入上强制使用样式（display:block；）。这似乎暂时解决了问题。谢谢大家的建议！

<label for="denim1">
    <span>28</span>
</label>
<input type="radio" ... id="denim1" />