html - 样式化的复选框标签不会选中

Question

我在使用样式化的复选框/标签组合时遇到了这个问题，当我点击它时标签似乎不会被选中。页面上有一个用于“全选”复选框的按钮，它可以正常工作，但点击通常没有任何反应。

代码

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

.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 label: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 + label:after {
        opacity: 1;
}

编辑:

好的，非常感谢，需要 ID 的 for 标签解决了这个问题。现在的问题是页面上有多个复选框，但即使您单击其中任何一个，也只会选中第一个。有什么想法吗？

Answer 1

您没有关闭 label 标签，您需要提供一个与 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 label: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+label:after {
  opacity: 1;
}

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