Javascript jQuery单选图像脚本更改为复选框

我有一个脚本，可以将单选按钮更改为图像，并在选中时更改类，这很好

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

我已经能够让它将复选框更改为图像，当它被选中时，它会更改类，但我无法让它“取消勾选”。这似乎与jQuery道具有关，但我并不理解

有人能帮我把这个打勾解开吗

以下是脚本：

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

（函数（$）{
//注册jQuery插件。
$.fn.checkboxImageSelect=函数（选项）{
//选项的默认变量。
var默认值={
//Img类。
imgItemClass:'无线电选择img项目'，
//Img检查类。
imgItemCheckedClass:“已检查项”，
//是否需要连接隐藏标签？
希德拉贝尔：是的
},
/**
*方法在需要更新类时触发。
*/
syncClassChecked=功能（img）{
var radioName=img.prev（'input[type=“checkbox”]'））.attr（'name'）；
$（'input[name=“”+radioName+“]”）。每个（函数（）{
//通过无线电名称定义img。
var myImg=$（this.next（'img'）；
//添加/删除选中的类。
if（$（this.prop（'checked'））{
myImg.addClass（options.imgItemCheckedClass）；
}否则{
removeClass（options.imgItemCheckedClass）；
}
});
};
//解析args。。
选项=$.extend（默认值，选项）；
//在元素上启动jQuery循环。。
返回此值。每个（函数（）{
$（本）
//首先，我们需要隐藏无线电输入。
.hide（）
//并通过数据图像源添加新的img元素。
.在（''）之后；
//定义新的img元素。
var img=$（this.next（'img'）；
//添加项目类。
img.addClass（options.imgItemClass）；
//检查是否需要隐藏已连接的标签。
如果（options.hideLabel）{
$（'label[for='+$（this.attr（'id'）+']'））.hide（）；
}
//当我们创建了img和radio进行检查时，我们需要添加checked类。
if（$（this.prop（'checked'））{
img.addClass（options.imgItemCheckedClass）；
}
//在img元素上创建单击事件。
“点击”功能（e）上的图像{
$（本）
//上一个至当前无线电输入。
.prev（'input[type=“checkbox”]”）
//设置选中属性。
.prop（'checked'，true）
//运行无线电元素的更改事件。
.触发（“变更”）；
//启动同步类。
syncClassChecked（$（此））；
} );
});
}
})（jQuery）；

这是目前的页面：

---

“可选附加项”下的复选框。

我认为问题在于上次图像单击事件中的

.prop（'checked'，true）

。我想你应该检查并传递与当前状态相反的状态，而不是传递true，这是不是因为单选按钮上不能解开它？它所做的只是保持选中状态，或者选择自己，然后取消选择其他对象。若我把它改成其他的，那个么它看起来也不会滴答作响。并没有测试，但我认为Cerlin Boss是对的。您可以使用

.prop（“选中”）、！$（this.prop（“选中”）在状态之间切换，而不是检查当前状态我将.prop（'checked'，true）与.prop（'checked'，！$（this）.prop（'checked'）交换，但它仍然执行相同的操作。可以选中，但不会取消选中。