Edit in JSFiddle

function initCheckBoxes()
{
    if ($('.label-check input').length) {
        $('.label-check').each(function() {
            var $this = $(this);
            if ($this.find('input').prop('checked')) {
                $this.addClass('c-on');
            }
            $this.click(function() {
                if ($this.find('input').prop('checked')) {
                    $this.addClass('c-on');
                } else {
                    $this.removeClass('c-on');
                }
            });
        });
    };
}
$(function(){ 
    initCheckBoxes()
}); 

<div id="sizer">
    <form action="#" method="get" accept-charset="utf-8">
        <fieldset class="checkboxes">
            <label class="label-check" for="checkbox-01"><input name="sample-checkbox-01" id="checkbox-01" value="1" type="checkbox" checked /> I agree to the terms &#38; conditions.</label>
            <label class="label-check" for="checkbox-02"><input name="sample-checkbox-02" id="checkbox-02" value="1" type="checkbox" /> Please send me regular updates.</label>
        </fieldset>
    </form>
    <div id="footer">
        <a href="http://www.maratz.com/blog/archives/2006/06/11/fancy-checkboxes-and-radio-buttons/">&#8592; Full how-to article</a>
        <a href="demo.html">Old school JavaScript &#8594;</a>
    </div>
</div>

/* les styles permettant de cacher la checkbox et d'afficher l'image de fond */
.label-check    { padding-left: 34px; }
.label-check    { background: url(http://webdesign.maratz.com/lab/fancy-checkboxes-and-radio-buttons/check-off.png) no-repeat; }
label.c-on      { background: url(http://webdesign.maratz.com/lab/fancy-checkboxes-and-radio-buttons/check-on.png) no-repeat; }
.label-check input { position: absolute; left: -9999px; }


/*** style pour les boutons radios //TODO ***/
.label-radio    { padding-left: 34px; }
.label-radio    { background: url(http://webdesign.maratz.com/lab/fancy-checkboxes-and-radio-buttons/radio-off.png) no-repeat; }
label.r-on      { background: url(http://webdesign.maratz.com/lab/fancy-checkboxes-and-radio-buttons/radio-on.png) no-repeat; }
.label-radio input  { position: absolute; left: -9999px; }

/*decoration*/
* { margin: 0; padding: 0; }
html        { font: 14px/18px 'HelveticaNeue-Light', 'Helvetica Neue', Arial, Helvetica, sans-serif; color: #fff; background: url(noise.png); }
a:hover, a:active { outline: none; }
#sizer      { width: 340px; margin: 0 auto; padding:0; }
form        { width: 300px; padding: 18px 20px 0; margin-bottom: 18px; background: #4f84b8; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -khtml-border-radius: 10px; box-shadow: 0 5px 12px rgba(0,0,0,.4); -webkit-box-shadow: 0 5px 12px rgba(0,0,0,.4); -moz-box-shadow: 0 5px 12px rgba(0,0,0,.4); -khtml-box-shadow: 0 5px 12px rgba(0,0,0,.4); }
fieldset    { border: 0; padding-bottom: 9px; }
label       { display: block; cursor: pointer; line-height: 20px; padding-bottom: 9px; text-shadow: 0 -1px 0 rgba(0,0,0,.2); }
.radios     { padding-top: 18px; background: url(divider.png) repeat-x 0 0; }
.label-check input,
.label-radio input  { margin-right: 5px; }
#footer     { width: 100%; text-align: center; font-size: 12px; }
#footer a   { padding: 2px 10px; margin: 0 2px; color: #999; background: #ddd; text-decoration: none; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -khtml-border-radius: 10px; }
#footer a:hover,
#footer a:focus { color: #fff; background: #333; background: rgba(0,0,0,.3); }
/*decoration*/