Question

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

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

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

.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中设置父元素的样式）

Answer 1

在同一页面上两次使用相同的id属性是不合法的。如果元素在同一表单或不同表单上，则 at 无关紧要。

他们绝对可以拥有相同的名称属性。名称是发送到您的服务器的名称。如果需要，您可以在同一表单上使用相同的名称包含50个元素。

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

只需制作第一个... id="x1" name="x" ...和第二个... id="x2" name="x" ...，然后将标签指向for="x1"或for="x2"

Answer 2

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

但是，您应该从不为不同的HTML元素使用相同的ID。

来自HTML5 specs：

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

如果您使ids独特，您的标签将按预期工作。

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

2 个答案: