如何使用 jQuery 将单选按钮替换为图像？答案

【问题标题】：How can I replace radio buttons with images using jQuery?如何使用 jQuery 将单选按钮替换为图像？
【发布时间】：2014-04-28 22:59:16
【问题描述】：

我有一些看起来像这样的标记，它来自电子商务 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 完成吗？或者，也许一个更好的问题是您如何发送带有图像而不是单选按钮的表单数据？

【问题讨论】：

stackoverflow.com/questions/17541614/…
向与单选按钮相关的图像添加点击事件处理程序，并让它选择单选输入。无线电输入的行为仍然相同，但可以使用 CSS 隐藏/不显示。

标签： javascript jquery forms

【解决方案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>

【讨论】：

【解决方案2】：

sfletche 的回答是正确的，虽然你不需要将单选按钮包裹在标签内，它只需要采用相同的形式。

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

<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;
}

【讨论】：