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

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