Create a div that acts like an html checkbox

Question

I want to turn on/off the div on click (it should act like an html checkbox) and make visible changes using css. Is this possible without Javascript, or would I have to use Javascript?

If you have created such a script please share it.

Thank you for your help in advance.

Answer 1

You could do this very easily with only CSS code by hiding the checkboxes and styling their labels like so:

HTML

<div id="checkboxes">
    <input type="checkbox" name="rGroup" value="1" id="r1" checked="checked" />
    <label class="whatever" for="r1"></label>
    <input type="checkbox" name="rGroup" value="2" id="r2" />
    <label class="whatever" for="r2"></label>
    <input type="checkbox" name="rGroup" value="3" id="r3" />
    <label class="whatever" for="r3"></label>
</div>

CSS

.whatever{
    background-color: red;
    display: inline-block;
    width: 100px;
    height: 100px;
}

#checkboxes input[type=checkbox]{
    display: none;
}

#checkboxes input[type=checkbox]:checked + .whatever{
    background-color: green;
}

You can take a look at this simple code in action here:
JSFiddle

Hope this helps! :)