Unchecking a check from an emulated checkbox

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 span box created.