不一致的行为——点击第二个单选按钮'的标签不会激活它，而第一个可以

Question

下面的代码(这里是jsFiddle)显示了一个相当奇怪的行为…

<div style="white-space:nowrap;">
  <input type="radio" id="one" name="click_item" value="1" />
  <label for="one">First Item</label>
  <input type="radio" id="one" name="click_item" value="2" />
  <label for="two">Second Item</label>
</div>

…点击标签"第一项"选中/取消选中第一个单选按钮，但点击标签"第二项"没有任何作用!

我确信解决方案是微不足道的，但我就是看不出我错过了什么!

Answer 1

id必须唯一;你们的id是一样的。正确:

<input type="radio" id="two" name="click_item" value="2" />

Answer 2

您需要有id的唯一名称，您为两个元素使用相同的id，因此您需要为另一个元素声明另一个id，因此它应该是

<input type="radio" id="two" name="click_item" value="2" />