jQuery radio image script change to checkbox

I have a script to change radio buttons into images and change the class when selected, this works fine.

I would like to use the same styling for checkboxes and I am trying to change the script to make this work.

I have been able to get it to change the checkboxes to images, and when it's selected it changes class but I cannot get it to 'untick'. It appears to be something to do with jQuery prop, but it's not something I understand.

Can someone help me get this to tick and untick please.

Here is the script:

(function($) {
    // Register jQuery plugin.
    $.fn.checkboxImageSelect = function( options ) {
        // Default var for options.
        var defaults = {
                // Img class.
                imgItemClass: 'radio-select-img-item',
                // Img Checked class.
                imgItemCheckedClass: 'item-checked',
                // Is need hide label connected?
                hideLabel: true
            },

            /**
             * Method firing when need to update classes.
             */
                syncClassChecked = function( img ) {
                var radioName = img.prev('input[type="checkbox"]').attr('name');

                $('input[name="' + radioName + '"]').each(function() {
                    // Define img by radio name.
                    var myImg = $(this).next('img');

                    // Add / Remove Checked class.
                    if ( $(this).prop('checked') ) {
                        myImg.addClass(options.imgItemCheckedClass);
                    } else {
                        myImg.removeClass(options.imgItemCheckedClass);
                    }
                });
            };

        // Parse args.. 
        options = $.extend( defaults, options );

        // Start jQuery loop on elements..
        return this.each(function() {
            $(this)
                // First all we are need to hide the radio input.
                .hide()
                // And add new img element by data-image source.
                .after('<img src="' + $(this).data('image') + '" alt="radio image" />');

            // Define the new img element.
            var img = $(this).next('img');
            // Add item class.
            img.addClass(options.imgItemClass);

            // Check if need to hide label connected.
            if ( options.hideLabel ) {
                $('label[for=' + $(this).attr('id') + ']').hide();
            }

            // When we are created the img and radio get checked, we need add checked class.
            if ( $(this).prop('checked') ) {
                img.addClass(options.imgItemCheckedClass);
            }

            // Create click event on img element.
            img.on('click', function(e) {
                $(this)
                    // Prev to current radio input.
                    .prev('input[type="checkbox"]')
                    // Set checked attr.
                    .prop('checked', true)
                    // Run change event for radio element.
                    .trigger('change');

                // Firing the sync classes.
                syncClassChecked($(this));
            } );
        });
    }
}) (jQuery);

And this is the page it's on at the moment: http://ift.tt/1RTiPCn

It's the one under 'optional extras' that is the checkbox.