点击图像，选择无线电不工作

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属性应该引用输入的id，而不是名称看到的:http://jsfiddle.net/EtvLu/

Answer 3

for属性应该是它所引用的元素的id，并且两个单选按钮应该具有相同的名称(假设您希望它们作为一个组):

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