点击图片并选择收音机不工作

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，并且两个单选按钮应具有相同的名称（假设你希望他们为一个基团）：

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

Answer 3

的用于标签的属性应该引用输入它是不是名字 见的id： http://jsfiddle.net/EtvLu/