checkbox.css

.checkbox {
    background: url("../img/common/checkbox.png") no-repeat scroll 0 0 transparent;
    cursor: pointer;
    float: left;
    height: 11px;
    margin: 0 5px 0 0;
    position: relative;
    width: 11px;
}

.checkbox.on {
    background-position: 0 -13px;
}

.checkbox input {
    cursor: pointer;
    height: 11px;
    left: 0;
    margin: 0;
    opacity: 0;
    padding: 0;
    position: absolute;
    top: 0;
    width: 11px;
}

checkbox.html

<span class="checkbox">
	<input type="checkbox" checked="checked" id="check_1" value="checkbox one" name="check[]">
</span>

checkbox.js

checkBox : function() {
	var checkBox = $('.checkbox');
	
	// if an input is selected in page loading
	checkBox.find('input[type="checkbox"]').each(function(index, key) {
		if ( $(this).is(':checked') ) {
			$(this).parent().addClass('on');
		}
	});
	
	checkBox.find('input[type="checkbox"]').on('change', function() {
		if ( $(this).is(':checked')) {
			$(this).parent().addClass('on');
		}else {
			$(this).parent().removeClass('on');
		}
	});
}