不一致的行为 - 单击第二个单选按钮标签不会激活它，而第一个单选按钮标签不会激活它

Question

下面的代码（jsFiddle here）表现出一种相当奇怪的行为......

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

...点击标签“First Item”检查/取消选中第一个单选按钮，但点击标签“Second Item”什么都不做！

我确信解决方案是微不足道的，但我只是无法看到我错过的东西！

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