jQuery无线电图像脚本更改为复选框

Question

我有一个脚本可以将单选按钮更改为图像并在选中时更改类，这样可以正常工作。

我想对复选框使用相同的样式，我正在尝试更改脚本以使其工作。

我已经能够将其更改为图像的复选框，当它被选中时，它会改变课程，但我无法将其取消为“取消”＃39;。它似乎与jQuery prop有关，但它不是我理解的东西。

有人可以帮我解决这个问题吗。

这是脚本：

(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);

这是它目前所在的页面： http://www.absoluteglazing.co.uk/quotation?item=walkon

这是一个可选的附加内容＆＃39;这是复选框。