Styled Checkboxes

by Marventus

HTML

<span class="dd-checkbox"></span>
<input class="styled" type="checkbox" checked="checked" />
<br/>
<input class="checker" type="button" value="Checker" />

CSS

.dd-checkbox {
background:url('http://elblawg.com/dragdrop/images/checkbox-small.png') no-repeat;
clear:left;
cursor:pointer;
display:block;
float:left;
height:14px;
padding:0 5px 0 0;
width:14px;
}
input[type=button] {
    margin-top:10px;
    padding:5px 10px;
}

JavaScript

$(function() {
/* Styled checkboxes */
	$(".dd-checkbox").click(function() {
		var ta = $(this).siblings("input.styled");
		ta.trigger('click');
        if ($.browser.msie)
            ta.trigger('change');
	});
	$("input.styled").change(function() {
		var ta = $(this).siblings(".dd-checkbox");
		if ( $(this).is(":checked") ) {
			mD = "0 -14px";
			mU = "0 -28px";
		} else {
			mD =  "0 -42px";
			mU = "0 0";
		}
		$(ta).css("background-position", mD);
		setTimeout(function() {
			$(ta).css("background-position", mU);
		}, 150);
	});
    $(".checker").click(function() {
        var ta = $(this).siblings("input.styled");
        var stat = $(ta).is(":checked");
        alert(stat);
    });
});
$(window).load(function() {
    $(".dd-checkbox").each(function() {
        var ta = $(this).siblings("input.styled");
        var dbP = ta.is(":checked") ? "0 -28px" : "0 0";
        $(this).css("background-position",dbP);
    });
});