How do I get label with checkbox to work? - html

Question

I made a label because I wanted to apply css to the checkbox.
However, the label is not working except for the checkbox whose id is 'checkall'.
<div class="divCenter cartDiv">
<ul>
<li class="selectallforcart">
<div class="hanadiv">
<input type="checkbox" id="checkall" class="check" value="0"/>
<label for="checkall"></label> selelct All
</div>
</li>
</ul>
<% ArrayList<LikePdVO> likeList = (ArrayList<LikePdVO>)(request.getAttribute("likeList"));
for(LikePdVO vo : likeList) {
String arr[] = vo.getPhoto().split("\\*");
%>
<div class="cartProduct" id="<%=vo.getPd_id()%>">
<div class="fl cartCheck">
<input type="checkbox" class="check" name="<%=vo.getName()%>"
value="<%=vo.getOrder_price()%>" id="<%=vo.getPd_id()%>">
<label for="<%=vo.getPd_id()%>">
</label>
</div>
this is my code.
.cartDiv input[type=checkbox] + label {
display: inline-block;
width: 20px;
height: 20px;
border: 2px solid #bcbcbc;
cursor: pointer;
}
.cartDiv input[type=checkbox]:checked + label {
background-color: #866744;
}
.cartDiv input[type=checkbox] {
display: none;
}
And this is CSS.

Answer 1

When you mean that the label is not working, I assume you mean that clicking on it doesn't cause the checkbox to be checked?
Either way, the label's text needs to be within the element, so it should be:
<label for="checkall">Select all</label>
And your other labels contain no text, so the label itself is probably quite small, despite the CSS, and therefore not clickable.

Answer 2

You need to set label text in the label tag not out side of it.
<div class="divCenter cartDiv">
<ul>
<li class="selectallforcart">
<div class="hanadiv">
<input type="checkbox" id="checkall" class="check" value="0" />
<label for="checkall">selelct All</label>
</div>
</li>
</ul>
</div>