0

我正在尝试将 a<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>

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

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

最后要注意的一件事，如果我删除onfocus="form.submit();"它，它在 Firefox 中可以正常工作，但在 IE 7-中不再适用。

4

2 回答 2

1

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

于 2009-10-12T17:38:11.653 回答
0

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

IE。

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

查看w3schools 标签标签示例

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

于 2009-10-12T17:56:22.177 回答