使用具有相同输入 ID 的单选按钮

Question

我编写了一个带有充当手风琴选项卡的单选按钮的代码。对于我的论坛，我需要能够在同一页面上多次发布完全相同的代码。我知道只需编辑输入行的 ID 就可以实现这一点。不幸的是，对于那些在我的论坛中只想填写代码的人来说，这不是很用户友好，因为他们不习惯 HTML。

我想知道是否有一种方法可以将单选按钮限制到表单或指定的容器，以便每个新容器独立运行，即使页面上的 ID 与前一个容器相同。

<form>
  <div>
    <input type="radio" name="Block" id="one" checked="checked" value="one" />
    <label for="one">1</label>
    <article>
      <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.</p>
    </article>
  </div>
  <div>
    <input type="radio" name="Block" id="two" value="two" />
    <label for="two">2</label>
    <article>
      <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.</p>
    </article>
  </div>
</form>

我暂时删除了 CSS 部分。如果您现在复制代码并运行它，您将看到只有上面的表单可以正常工作。

我将此代码翻译为 BB-Code，但它仅在论坛页面的最后一篇文章中有效，而没有更改 ID（显然）。

所以，简而言之：可以定义单选按钮在其中工作的区域（容器/表单/等），以便它们不会干扰同一页面上的相同代码吗？ 或者有没有其他方法可以在不让我的用户更改 id 的情况下实现此目的？

Answer 1

不可以，DOM 中不能有多个具有相同 id 的元素，也不例外。除了标签之外，您似乎不需要其他任何内容的 id，因此我建议将复选框和文本包装在标签元素内，从而消除对 id 的需要。

<form>
  <div>
    <label>
      <input type="radio" name="Block" checked="checked" value="one" />
      1
    </label>
    <article>
      <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.</p>
    </article>
  </div>
  <div>
    <label>
      <input type="radio" name="Block" value="two" />
      2
    </label>
    <article>
      <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.</p>
    </article>
  </div>
</form>