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

Question

I have some mark-up that looks like this, it's from an E-commerce 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>

etc etc

what I'd like to do is, have the user be able to click the image(the one in the label immediately following) instead of the radio button, and hide the radio button that is currently there, or have it be replaced with the image.

could that be done with jQuery? or, maybe a better questions is how could you send form data like that with images instead of radio buttons?

Answer 1

Wrap your radio button within your label like this

<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

The answer by sfletche is correct, though you need not wrap the radio button inside the label, it just has to be in the same form.

Also if you want to hide the radio button use the display:none or 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>

In your css use:

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