使用jquery的圓形複選框

Question

使用xml讀取特定內容的東西我添加複選框及其說明。但問題是，我想要我的複選框像radiobutton的可視化，但它應該像checkbox.I工作我可以檢​​查並取消勾選。而且，在勾號空格處（在複選框中），它應該是點（如果可能，可以是任何顏色）。

$(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

我真的不會推薦它，但你總是可以讓無線電按鈕像複選框一樣工作，如果這就是你真正的追求？

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

FIDDLE

Answer 2

您需要爲此使用圖像疊加。

創建兩個圖像一個未經檢查的觀點，一個用於然後根據點擊值檢查視圖更新一個隱藏的複選框，並改變顯示的圖像也

Answer 3

UPDATE

檢查這個DEMO 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)'}); 
    } 
});