jquery - 使用jquery制作圆形复选框

Question

使用 xml 读取特定内容的内容我正在添加复选框及其描述。但问题是我希望我的复选框像单选按钮一样可视，但它应该像复选框一样工作。我的意思是我可以选中和取消选中它。而且在刻度的空间(在复选框中)，它应该是点(如果可能的话可以是任何颜色)。

$(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)'});
    }
});