1

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

http://jsfiddle.net/pZ8jY/

<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;

}
4

3 回答 3

1

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

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

于 2013-08-08T15:28:20.723 回答
1

ID 必须是唯一的。

<input id="CheckBoxTwo" type="checkbox"  value=" test2@mail.com " />
于 2013-08-08T15:24:36.833 回答
0

尝试将复选框移到标签外并分配不同的 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>

于 2013-08-08T15:28:55.210 回答