将选中的复选框从勾号更改为纯色背景颜色

Question

默认情况下，当您选中复选框时，它会在框中打勾。我试图将它改为纯色天气，它是一个CSS背景或检查时的图像。 http://bootply.com/71996

<label class="checkbox"> 
    <input type="checkbox" value=""> 
    Content 
</label> 

我已经搜查，就在这里，但没有定论，简单看了几个答案。

Answer 1

看看your updated code。

HTML：

<label class="checkbox"> 
<input value="" type="checkbox"> 
Content 
</label> 

的JavaScript：

$("input[type=checkbox]").on("change", function() { 
    var $chk = $(this); 
    var isChecked = $chk.prop('checked'); 
    if (isChecked) { 
    $chk.parent().addClass("checked"); 
    } 
    else { 
    $chk.parent().removeClass("checked"); 
    } 
}); 

CSS：

.checkbox { color:blue; } 
.checkbox:before { content:""; background-color:blue; width:15px; height:18px; display:block; position:absolute; margin-left:-20px; } 
.checkbox.checked { color:red; } 
.checkbox.checked:before { background-color:red; } 

注：

JavaScript可以简化，但我有意在每次更改时检查值（而不是使用.toggleClass()）。