Styling <input type="checkbox"> using <span>s and updating the input accordingly according to events

fakeCheckbox.js

    // replace real checkboxes with fake ones using spans that work the same
    $('input[type=checkbox]').each(function() {
        var $input = $(this);
        $input.hide();

        var $fakeCheckbox = $('<div class="fake-checkbox"><span class="icon-TICK"></span></div>');
        $input.after($fakeCheckbox);

        // when our fake checkbox is clicked
        $fakeCheckbox.click(function() {
            // toggle the visible tick
            $fakeCheckbox.children().toggle();

            // toggle the hidden form element
            $input.prop("checked", !$input.prop("checked"));
        });

        // if the checkbox is unticked on page load, set our fake checkbox accordingly
        if (!$input.prop('checked')) {
            $fakeCheckbox.children().hide();
        }
        
    });