Question

我遇到了这个带有样式的复选框/标签组合的问题，似乎标签在点击它时不会检查。页面上有一个按钮，用于选择所有＆＃34;复选框，这是有效的，但通常点击没有任何反应。

代码

<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代码，您需要提供与id属性同名的for

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

Answer 2

标签中的for属性必须是复选框的ID。由于您的复选框ID不是check，因此无效。

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

此外，您只需封装标签中的复选框，而无需设置for属性。

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

Answer 3

关闭标签标签，输入需要一个与标签对应的ID。

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

编辑：拼写错误

样式复选框标签不会检查

3 个答案: