javascript - 输入类型 radio 在 iPhone 上不工作

Question

我正在开发一个网站，我在其中使用类型为“radio”的输入，但我在每个输入中为不同的图像更改了单选按钮而不是单选按钮。当我在 iPhone 上选择一个输入时，我无法更改为另一个输入，即使我点击另一个输入，它仍然停留在第一个输入上，我不知道为什么会这样。这是我的 html 和 CSS

<input type="radio" name="feeling" value="awesome" id="awesome"><label for="awesome"><span></span></label>
<input type="radio" name="feeling" value="normal" id="normal"><label for="normal"><span></span></label>
<input type="radio" name="feeling" value="bad" id="bad"><label for="bad"><span></span></label>

input[type="radio"] {
    display:none;
}

#awesome + label span {
    display: inline-block;
    width: 5rem;
    height: 5rem;
    vertical-align: middle;
    background: url(awesome.png) left top no-repeat;
    opacity: 0.6;
    -webkit-transition: opacity 300ms ease-out;
    -moz-transition: opacity 300ms ease-out;
    transition: opacity 300ms ease-out;
}


#normal + label span {
    display: inline-block;
    width: 5rem;
    height: 5rem;
    vertical-align: middle;
    background: url(normal.png) left top no-repeat;
    opacity: 0.6;
    -webkit-transition: opacity 300ms ease-out;
    -moz-transition: opacity 300ms ease-out;
    transition: opacity 300ms ease-out;
}

#bad + label span {
    display: inline-block;
    width: 5rem;
    height: 5rem;
    vertical-align: middle;
    background: url(bad.png) left top no-repeat;
    opacity: 0.6;
    -webkit-transition: opacity 300ms ease-out;
    -moz-transition: opacity 300ms ease-out;
    transition: opacity 300ms ease-out;
}

#bad + label, #normal + label, #awesome + label {
    margin: 1rem 2px;
} 

#awesome + label span:hover, #normal + label span:hover, #bad + label span:hover {
    opacity: 1;
}

#awesome:checked + label span, #normal:checked + label span, #bad:checked + label span {
    opacity: 1;
 }

我尝试在 Android 手机中从一种输入更改为另一种输入，它似乎运行良好。

这是解决我的问题的 fiddle :http://jsfiddle.net/bhzabL20/

提前致谢。

Answer 1

尝试将 onclick="" 放在 html 中的 label 标签上。如果您没有 label 标签，只需添加它们，以便它们每个都包含一个单选选项。