关于 onchange/onfocus 的跨浏览器问题
我正在尝试将 和 转换为单个按钮，单击该按钮时会添加特定的产品到购物车。此示例涉及 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 是为了隐藏单选按钮的可见性*
这在 IE 8、IE 7 和 IE 6 中工作得很好（令人惊讶的是！）它也适用于 Safari/Chrome。它在 Firefox 中不起作用。当我单击特定变体时，假设“27”，它会将组中的最后一个变体添加到购物车，即“28”。
最后要注意的一件事是，如果我删除 onfocus="form.submit();" 它在 Firefox 中工作正常，但在 IE 7 中不再工作。
I'm trying to turn a <label/> and <input type="radio"/> into a single button that when clicked, adds that specific product to a shopping cart. This example deals with 1 product, with potentially multiple variants, (ie. The Product would be "Denim Jeans", the Variants would be sizes, "26", "27", "28").
The HTML would look something like,
<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>
**The CSS on the <input/> are to hide the radio buttons from visibility*
This works fine in IE 8, IE 7, and IE 6 (surprisingly!) It also works in Safari/Chrome. It does not work in Firefox. When I click a specific variant, let's say "27", it will add the last variant in the group to the cart, that being "28".
One final thing to note, if I remove the onfocus="form.submit();" it works fine in Firefox, but no longer in IE 7-.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
您的单选按钮标签可能应该具有“名称”属性。每个名称应该相同，这样它们实际上就像单选按钮一样工作。
Your radio button tags should probably have "name" attributes on them. The name should be the same for each one, so that they actually work like radio buttons.
属性的标签需要指向输入的 id。
放置位置并不重要，它们可以隐藏或位于屏幕的相对两侧。
只要标签的@for 指向输入的@id，就可以了。
IE。
顺便查看 w3schools 标记标签 示例
。不错的网站！ :)
The labels for attribute needs to point to the id of the input.
It does not matter there placement, they could be hidden or on opposite sides of the screen.
So long as @for of the label points to @id of the input, your good to go.
ie.
Check out w3schools tag label examples
btw. Nice site! : )