两个单独的表单，输入具有相同的名称和 ID答案

【问题标题】：Two separate forms, with inputs that have same name and id两个单独的表单，输入具有相同的名称和 ID
【发布时间】：2016-03-23 21:40:11
【问题描述】：

我在同一个页面上有两个表单，两个标签带有 for 属性，指向两个具有相同 ID 和名称的复选框。

当我单击第二个表单标签之一时，它会检查第一个表单复选框。

在这种情况下，问题在于当您单击“x 名称 2”标签时，它会检查“x 名称”复选框，即使它们采用不同的形式：

.customCheckbox div label {
    padding: 5px;
    background-color: white;
    border: 2px solid #aaaaaa;
    background-image: none;
}

.customCheckbox div input {
    margin: 8px auto;
    padding: 5px;
    text-align: left;
    margin-left: -999999px;
    float: left;
}

.customCheckbox input[type=checkbox]:checked ~ label,
.customCheckbox input[type=radio]:checked ~ label {

    background-color: #117399;
    color: #eeeeee;
}

.customCheckbox input[type=radio]:checked ~ label {

    background-color: #117399;
    color: #eeeeee;
}

<form style="margin:30px;">
  <div class="customCheckbox">
    <div>
      <input id="x" name="x" type="checkbox"/><label for="x">x name</label>      
    </div>
    <br/>
    <div>
      <input id="y" name="y" type="checkbox"/>  <label for="y">y name</label>
    </div>
  </div>
</form>
<form style="margin:30px;">
  <div class="customCheckbox">
    <div>
      <input id="x" name="x" type="checkbox"/><label for="x">x name 2</label>      
    </div>
    <br/>
    <div>
      <input id="y" name="y" type="checkbox"/>  <label for="y">y name 2</label>
    </div>
  </div>
</form>

我不想重命名元素（因为有很多地方会发生这种情况）
我想尽量远离 JavaScript（如果可能的话）
由于我使用 CSS 来设置标签和复选框的样式，因此我无法将复选框嵌套在标签内（因为您无法在 CSS 中设置父元素的样式）

【问题讨论】：

HTML id 应该是唯一的。如果没有，就会发生这样的事情。
重复 ID 在 html 中是非法的。您的代码正在做的是正确的行为 - 处理文档中找到的第一个 id，并忽略其余部分（骗子）。阅读 getElementById() 的文档。它返回一个 DOM 节点，而不是 dom 节点列表，因为 id 不能重复。如果可以，那么该函数必须正确命名为 getElementsById。

标签： javascript html css forms

【解决方案1】：

在同一页面上使用相同的id 属性两次是不合法的。根本元素是在同一个表单上还是在不同的表单上都没有关系。

它们绝对可以具有相同的 name 属性。名称是发送到您的服务器的内容。如果需要，您可以在同一个表单上拥有五十个具有相同名称的元素。

但 ID 的全部目的是它们在页面上绝对必须是唯一的。

因此，只需创建第一个 ... id="x1" name="x" ... 和第二个 ... id="x2" name="x" ...，然后让您的标签指向 for="x1" 或 for="x2"

【讨论】：

这就是我害怕的，谢谢你的确认:)

【解决方案2】：

当不同的输入字段具有相同的名称时没有问题，只要它们采用不同的形式或它们代表相同的参数（例如，在单选按钮的情况下）。

但是，您应该切勿对不同的 HTML 元素使用相同的 id。

来自HTML5 specs：

id 属性指定其元素的唯一标识符 (ID)。

如果您使您的 ID 独一无二，您的标签将按预期工作。

【讨论】：