Custom Checkbox Demo

The HTML

<div class="container">
    <input type="checkbox" value="1" class="checkbox" />
</div>

The CSS

.container {
    width:20px;
    height:20px;
    background:url(checkbox.gif) no-repeat;
    cursor:pointer;
    overflow:hidden;
    position:relative; /* IE fix to hide overflow */
}

.checkbox {
    position:relative;
    left:30px;
}

.checked {
    background-position:0px -20px !important;
}

The jQuery

var $this = $(".container");
$(".container").toggle(function(){
    $this.addClass("checked");
    $(".checkbox").attr("checked","checked");
},function(){
    $this.removeClass("checked");
    $(".checkbox").removeAttr("checked");
});

< Custom Checkboxes with jQuery and CSS