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

Question

我试图将<label/>和<input type="radio"/>变成一个单击按钮，单击该按钮时，将该特定产品添加到购物车。这个例子涉及1种产品，可能有多种变体（即，该产品将是“牛仔布牛仔裤”，变体将是尺寸，“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例子

BTW。漂亮的网站！ ：）