Unchecking a check from an emulated checkbox - html

Question

I'd like to know how to modify this code to handle unchecking from an emulated checkbox.
First, here's the original input html:
<input type="radio" name="rf538" id="rf538" class="page_checkbox">
And here is the input css for class page_checkbox:
.page_checkbox {
display: none;
}
After the input html, I have this:
<label for="rf538"><span></span>Pleasures</label>
Here is my css code for the span inside the label:
.page_checkbox+label span {
display: inline-block;
width: 18px;
height: 18px;
margin: -2px 8px 0px 0px;
background-color: #ffffff;
vertical-align: middle;
cursor: pointer;
border-radius: 1px;
}
Finally, here is the css code that creates the checkbox and the check:
.page_checkbox:checked+label span:before {
position: relative;
left: 3px;
top: 2px;
content: '\002714';
color: #f06000;
font: 16px/16px Arial, Helvetica, Sans-serif;
}
You can see that there is a CSS for having a checked state but I do not know how to handle for unchecking the checked span box. I imagine theres some javascript involved?

Answer 1

Since you can't uncheck a radio button without JavaScript or a reset button, what you seem to be after is a checkbox instead, so change the radio button to a checkbox and it works.
.page_checkbox {
display: none;
}
.page_checkbox+label span {
display: inline-block;
width: 18px;
height: 18px;
margin: -2px 8px 0px 0px;
background-color: #ffffff;
vertical-align: middle;
cursor: pointer;
border-radius: 1px;
}
.page_checkbox:checked+label span:before {
position: relative;
left: 3px;
top: 2px;
content: '\002714';
color: #f06000;
font: 16px/16px Arial, Helvetica, Sans-serif;
}
<input type="checkbox" name="rf538" id="rf538" class="page_checkbox">
<label for="rf538"><span></span>Pleasures</label>