Question

我不知道为什么当我点击email2@mail.com时，我的第一个复选框被选中... 我做了一个小提琴来说明我的问题...

<table class="checkboxes">
   <tr>
    <td >
    <label for="CheckBoxOne"><input id="CheckBoxOne" type="checkbox"  value=" test@mail.com " />
        <span>test@mail.com </span></label></td>

          <td >
    <label for="CheckBoxOne"><input id="CheckBoxOne" type="checkbox"  value=" test2@mail.com " />
        <span>test2@mail.com </span></label></td>
  </tr>
</table>

CSS

.checkboxes label
{ 
    display: block;
    float: left;
    padding-right: 10px;
    white-space: nowrap;

}

.checkboxes input
{ 
    vertical-align: middle;
}

.checkboxes label span
{
    vertical-align: middle;

}

Answer 1

Ids必须是唯一的。

<input id="CheckBoxTwo" type="checkbox"  value=" test2@mail.com " />

Answer 2

不要使用相同的id两次。你的意思是那些复选框是不同的，所以使用不同的Id。标签的工作方式是，如果用label文本上的指针单击鼠标，点击应用于它们对应的输入字段。现在，在您的代码中，您将两个标签指向同一个id。因此，单击“test”和“test2”将应用于源代码中具有id“CheckboxOne”的第一个可见输入元素。这导致它检查第一个复选框

此外，如果您希望从表单发布所有这些数据，则需要使用"name"，而不是ID。

Answer 3

尝试移动标签外的复选框并指定不同的ID

<table class="checkboxes">
  <tr>
    <td >
      <label for="CheckBoxOne"><span>test@mail.com </span></label>
      <input id="CheckBoxOne" type="checkbox"  value=" test@mail.com " />
    </td>
    <td >
      <label for="CheckBoxOne2"><span>test2@mail.com </span></label>
      <input id="CheckBoxOne2" type="checkbox"  value=" test2@mail.com " />
    </td>
 </tr>

复选框在外部输入检查

3 个答案: