乐府复选框标签不会检查

我有一个风格的复选框/标签组合这个问题，看来，当我点击它的标签将不检查。在页面上有一个按钮可以“选择所有”复选框，并且可以正常工作，但通常不会发生任何事情。乐府复选框标签不会检查

代码

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

编辑：

好了，感谢这么多，for标签需要一个ID固定的问题。现在问题是页面上有多个复选框，但只有第一个复选框被选中，即使您点击其中的任何复选框。有什么想法呢？

来源

2017-04-11 B Johnson

所接受，你应该标志着一个答案，并创建一个新的问题，而不是编辑的这一个。 – dippas

@dippas好吧，我会那样做的。谢谢。尽管如此，还是不能接受你的答案。我会的时候会做。 –

您不关闭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>

来源

2017-04-11 15:38:14 dippas

它仍然不起作用，或者它应该是这样的。 –

@DanPhilip更新。 – dippas

在标签中for属性必须是复选框的ID。由于您的复选框ID不是check，它不起作用。

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

您也可以只encapsule在标签的复选框，而无需设置for属性。

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

来源

2017-04-11 15:40:03 Musa

关闭标签标签，输入需要一个id来与标签对应。

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

编辑：错字

来源

2017-04-11 15:40:34 FD3

乐府复选框标签不会检查

回答

相关问题