在触摸移动设备上激活无线电标签

Question

我做了一个html wizzard来订购.有四个步骤,每个步骤都是一堆单选按钮.我将每个单选按钮标签重新设计为大按钮(并隐藏无线电输入本身).这一切都在经典PC上有很大的作用.但我遇到了移动设备的问题(iPHONE和iPAD,我无法在其他设备上测试,因为我没有),无法选择单选按钮.

我在stackoverflow上发现这个问题只有一个注意事项,但是那里发布的解决方案也没有功能.

最初的灵感来自苹果在线商店,用于选择不同颜色的设备.

我的示例代码:

<label class="option" for="edit-term-worker">
<input id="edit-term-worker" class="form-radio" type="radio">
<span class="worker-name">Sandra</span>
</label>

这需要一些JS,或者我的代码中有一些缺陷？

感谢大家的帮助.

Answer 1

你试过这个吗？

<input id="edit-term-worker" class="form-radio" type="radio" />
<label class="option" for="edit-term-worker"  onclick="">
<span class="worker-name">Sandra</span>
</label>

编辑:添加一个空的onclick,根据这应该做的技巧:HTML <label>命令在Iphone浏览器中不起作用

请注意,您不应将单选按钮放入标签标签,它应该在外面.