Железный вариант:
<div class="checkbox">
<i></i>
<input id="ch0" type="checkbox" name="name" />
<label for="ch0">Лейбл для чекбокса</label>
</div>
.checkbox{
position:relative;
}
.checkbox input{
position:absolute;
top:0;
left:0;
width: 38px;
height: 32px;
-moz-opacity:0 ;
filter:alpha(opacity: 0);
opacity: 0;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}
.checkbox i{
display:block;
width: 38px;
height: 32px;
position:absolute;
top:0;
left:0;
backgroung:transparent url('/image/url/example.jpg') no-repeat 0 0;
}
.checkbox.checked i{
background-position:0 -32px;
}
.checkbox label{
position:relative;
padding:0 0 0 48px;
}
$('.chackbox').on({
change:function(ev){
var parent = $(ev.delegateTarget);
var input = $(ev.target);
parent[(input.prop('checked') ? 'addClass' : 'removeClass')]('checked');
}
});