Click image and select radio not working

Question

I have this code and cannot get it to select the radio when I click on it's image.

I'm I missing something?

Here is the current code:

<label style="display: inline; " for="test1">

<img src="images/image1.jpg" />

<input checked="checked" class="select_control" id="select1" name="test1" type="radio" value="value1" />
</label>

<label style="display: inline; " for="test2">

<img src="images/image2.jpg" />

<input checked="checked" class="select_control" id="select2" name="test2" type="radio" value="value2" />
</label>

Answer 1

The for attribute in label should match input's id and not name. name is used for grouping radio buttons and checkboxes (when it's the same name their are in a group, so checking one will will uncheck the other).

<label for="test1">
  <img src="image1.jpg" />
  <input id="test1" name="test" type="radio" value="value1" />
</label>
<label for="test2">
    <img src="image2.jpg" />
    <input id="test2" name="test" type="radio" value="value2" />
</label>

Here's a working example of your code: http://jsfiddle.net/nXb5a/

Answer 2

the for attribute of the label should reference the id of the input it is for not the name see: http://jsfiddle.net/EtvLu/