单击图像并选择无线功能不工作

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

label中的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>