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

Question

我正在尝试将<label/> 和<input type="radio"/> 变成一个按钮，单击该按钮时，会将特定产品添加到购物车中。此示例处理 1 个产品，可能有多个变体（即，产品为“Denim Jeans”，变体为尺码“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>

**<input/> 上的 CSS 用于隐藏单选按钮不可见*

这在 IE 8、IE 7 和 IE 6 中运行良好（令人惊讶！）它也适用于 Safari/Chrome。它不在 Firefox 中工作。当我点击一个特定的变体时，比如说“27”，它会将组中的最后一个变体添加到购物车中，即“28”。

最后要注意的是，如果我删除了onfocus="form.submit();"，它在 Firefox 中可以正常工作，但在 IE 7 中就不行了。

Answer 1

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

Answer 2

属性的标签需要指向输入的id。 放置位置无关紧要，它们可以隐藏或位于屏幕的相对两侧。 只要标签的@for 指向输入的@id，就可以了。

即。

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

查看w3schools tag label 示例

顺便说一句。不错的网站！ :)