html - 多个复选框，只有一个可选

Question

所以我在页面上有这些复选框，但无论我点击哪个，只有第一个得到复选标记。我不知道问题出在哪里。起初我遇到的问题是复选框不会显示为已选中，但现在它只是第一个被选中的。页面上有一个按钮可以选择所有框，并且可以正常工作，只是当用户尝试选择一个按钮时它不起作用。

代码

.checkbox {
        margin: 3px auto;
        width: 25px;
        position: relative;
}
.checklabel {
        cursor: pointer;
        position: absolute;
        width: 25px;
        height: 25px;
        top: 0;
        left: 0;
        background: #eee;
        border:1px solid #ddd;
}
.checkbox .checklabel:after {
        opacity: 0.2;
        content: '';
        position: absolute;
        width: 9px;
        height: 5px;
        background: transparent;
        top: 6px;
        left: 7px;
        border: 3px solid #333;
        border-top: none;
        border-right: none;

        transform: rotate(-45deg);
}
.checklabel:hover::after {
        opacity: .5;
}
.checkbox input[type=checkbox]:checked + .checklabel:after {
        opacity: 1;
}



<td><div class="checkbox"><input class="check" id="check" type="checkbox"><label class="checklabel" for="check"></label></div></td>
<td><div class="checkbox"><input class="check" id="check" type="checkbox"><label class="checklabel" for="check"></label></div></td>

Answer 1

安id may only be used once per page ，并且标签的 for 属性需要引用您希望它控制的输入的唯一 id。

.checkbox {
  margin: 3px auto;
  width: 25px;
  position: relative;
}

.checklabel {
  cursor: pointer;
  position: absolute;
  width: 25px;
  height: 25px;
  top: 0;
  left: 0;
  background: #eee;
  border: 1px solid #ddd;
}

.checkbox .checklabel:after {
  opacity: 0.2;
  content: '';
  position: absolute;
  width: 9px;
  height: 5px;
  background: transparent;
  top: 6px;
  left: 7px;
  border: 3px solid #333;
  border-top: none;
  border-right: none;
  transform: rotate(-45deg);
}

.checklabel:hover::after {
  opacity: .5;
}

.checkbox input[type=checkbox]:checked + .checklabel:after {
  opacity: 1;
}

<td>
  <div class="checkbox"><input class="check" id="check" type="checkbox"><label class="checklabel" for="check"></label></div>
</td>

<td>
  <div class="checkbox"><input class="check" id="check2" type="checkbox"><label class="checklabel" for="check2"></label></div>
</td>