0

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?

Serjik
  • 10,543
  • 8
  • 61
  • 70
TopTomato
  • 587
  • 3
  • 8
  • 23
  • 2
    http://stackoverflow.com/questions/17541614/use-thumbnail-image-instead-of-radio-button – sfletche Apr 28 '14 at 23:02
  • Add a click event handler to the image that relates to the radio button and have it select the radio input. The radio inputs would still behave the same but could be hidden / not displayed, with CSS. – gratz Apr 28 '14 at 23:03

2 Answers2

2

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>
sfletche
  • 47,248
  • 30
  • 103
  • 119
1

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;
}
cvipul
  • 120
  • 1
  • 9