I'm looking for guidance on updating this code to manage unchecking an emulated checkbox.
Let's start with the original input HTML:
<input type="radio" name="rf538" id="rf538" class="page_checkbox">
Next, here is the CSS for the class page_checkbox:
.page_checkbox {
display: none;
}
Following the input HTML, we have:
<label for="rf538"><span></span>Pleasures</label>
Here's the CSS 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 that styles the checkbox and check:
.page_checkbox:checked+label span:before {
position: relative;
left: 3px;
top: 2px;
content: '\002714';
color: #f06000;
font: 16px/16px Arial, Helvetica, Sans-serif;
}
While there is a CSS style for the checked state, I'm unsure how to handle unchecking the checked span box. Is JavaScript necessary for this functionality?