Question

我正在尝试将<label/>和<input type="radio"/>转换为单个按钮，单击此按钮会将特定产品添加到购物车。这个例子涉及1种产品，可能有多种变体，（即产品为“Denim Jeans”，Variants为尺寸，“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将隐藏单选按钮* {/ p>

这在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示例

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

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

2 个答案: