使用jquery制作圆形复选框

Question

使用xml读取特定内容的内容我正在添加复选框及其说明。但问题是我想要我的复选框的视觉像radiobutton但它应该像checkbox一样工作。我的意思是我可以检查并取消选中它。在勾选空间（在复选框中），它应该是点（如果可能，可以是任何颜色）。

$(xml).find("Layer[Name='"+layerName+"']").find("IndustryComponent").each(function()
            {
                var layerDesciption= $(this).attr('Name');
                if($(this).is(':empty'))
                {
                    $(".InsideLayerContainer").append("<input type='checkbox' name='' value='' disabled='true'><label>"+layerDesciption+"</label><br/>");   
                }
                else
                {
                    $(".InsideLayerContainer").append("<input type='checkbox' name='' value=''><label>"+layerDesciption+"</label><br/>");
                }
            });

Answer 1

更新

检查此演示http://jsfiddle.net/yeyene/Xqr4n/2/

HTML

<input class="myCheck" type="checkbox" name="vehicle" value="Bike">check 1<br />
<input class="myCheck" type="checkbox" name="vehicle" value="Bike">check 2<br />
<input class="myCheck" type="checkbox" name="vehicle" value="Bike">check 3<br />

JQUERY

$('input[type=checkbox]').each(function(){
    $(this).wrap('<span class="circle">');
});

$('.circle').on("click", function(){
    if($(this).css("background-color") == 'rgb(223, 223, 223)') { 
        $(this).find('.myCheck').prop('checked', true);
        $(this).css({'background-color':'rgb(0, 64, 212)'});
    }
    else {
        $(this).find('.myCheck').prop('checked', false);
        $(this).css({'background-color':'rgb(223, 223, 223)'});
    }
});

Answer 2

您需要使用图像叠加层。

为未选中的视图创建两个图像，为已检查的视图创建一个图像，然后根据点击值更新隐藏的复选框并更改可见图像

Answer 3

我不是真的推荐它，但是你总是可以让单选按钮像复选框那样工作，如果这就是你真正想要的东西吗？

$('input[type="radio"]').on('click', function() {
    this.checked = !$(this).data('checked')
    $(this).data('checked', !$(this).data('checked'));
});

FIDDLE