Нажмите на изображение и выберите радио не работает

Question

У меня есть этот код, и я не могу заставить его выбрать радио, когда я нажимаю на его изображение.

Я что-то упустил?

Вот текущий код:

<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

Атрибут for в метке должен соответствовать вводу id, а не name.name используется для группировки переключателей и флажков (когда одно и то же имя, они находятся в группе, поэтому при проверке одного из них будет отключен другой).

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

Вот рабочий пример вашего кода:http://jsfiddle.net/nXb5a/

Answer 2

атрибут for метки должен ссылаться на идентификатор ввода, для которого это не имя, см .: http://jsfiddle.net/EtvLu/

Answer 3

атрибут for должен быть идентификатором элемента, на который он ссылается, и оба переключателя должны иметь одинаковое имя (при условии, что вы хотите, чтобы они были одной группой):

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

<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="select2">

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

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