Question

我有一些看起来像这样的标记，它来自电子商务CMS。

<input type="radio" name="id[9]" value="70" id="attrib-9-70"class="threads-opts" />
<label class="attribsRadioButton" for="attrib-9-70">SL01<br />
<img src="images/attributes/SL01_thumb.jpg" alt="" width="100" height="100" /></label>

<input type="radio" name="id[9]" value="71" id="attrib-9-71"class="threads-opts" />
<label class="attribsRadioButton" for="attrib-9-71">SL02<br />
<img src="images/attributes/SL02_thumb.jpg" alt="" width="100" height="100" /></label>

等等

我想要做的是，让用户能够点击图像（紧接着标签中的图像）而不是单选按钮，并隐藏当前那里的单选按钮，或者让它成为替换为图像。

可以用jQuery完成吗？或者，或许更好的问题是你如何使用图像而不是单选按钮发送表单数据？

Answer 1

将您的单选按钮包裹在标签中

<label class="attribsRadioButton" for="attrib-9-70">
    <input type="radio" name="id[9]" value="70" id="attrib-9-70"class="threads-opts" />
    <img src="images/attributes/SL01_thumb.jpg" alt="" width="100" height="100" />
</label>

Answer 2

sfletche的答案是正确的，虽然您不需要将标签中的单选按钮包裹起来，但它必须采用相同的形式。

此外，如果您想隐藏单选按钮，请使用display：none或visibility：hidden style。

<input type="radio" name="id[9]" value="70" id="attrib-9-70" class="threads-opts" />
<label class="attribsRadioButton" for="attrib-9-70">
    <img src="images/attributes/SL01_thumb.jpg" alt="" width="100" height="100" />
</label>

在你的css中使用：

.threads-opts{
    display:none;
    visibility:hidden;
}

如何使用jQuery替换单选按钮？

2 个答案: