CODEWITHSUNDEEP
html
바나나
바나나

Reputation: 21

How do I get label with checkbox to work?

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.

Upvotes: 2

Views: 92

Answers (2)

Alireza Ahmadi
Alireza Ahmadi

Reputation: 9893

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>

Upvotes: 1

Ian Devlin
Ian Devlin

Reputation: 18870

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.

Upvotes: 1

Related Questions