Question

I have found nice code, that stylize checkboxes.

HTML:

<input id="checkbox" type="checkbox" class="checkbox" />
<label id="checkbox_lab" for="checkbox" class="checkbox_lab"></label>

CSS:

.checkbox {
    display: none;
}
.checkbox_lab {
    background: url("images/off.png") no-repeat;
    height: 28px;
    width: 81px;
    display: block;
}
.checkbox_lab_sel {
    background: url("images/on.png") no-repeat;
}

Javascript (uses jquery):

    $(document).ready(function(){
        $(".checkbox").change(function(){
            if($(this).is(":checked")){
                $(this).next("label").addClass("checkbox_lab_sel");
            }else{
                $(this).next("label").removeClass("checkbox_lab_sel");
            }
        });
    });

It is working really nice. I would like “nice toggle animation from on to off and vice versa”, which is saved in animated gif, but… I’m not very good in JS and don’t know how to do it. Does anybody have got idea?

Answer 1

here you have a quick example

HTML

<input id="checkbox" type="checkbox" class="checkbox" />
<label id="checkbox_lab" for="checkbox" class="checkbox_lab"></label>​

CSS

.checkbox {
    /*display: none;*/
}
.checkbox_lab {
    background: url("images/off.png") no-repeat;
    height: 28px;
    width: 81px;
    display: block;
}
.checkbox_lab_sel {
    background-image: url('http://cdn.rpxnow.com/rel/img/9a8269421303631316be4ab5e34870e1.gif');
}​

Javascript

$(".checkbox").change(function(){
    $('#checkbox_lab').toggleClass('checkbox_lab_sel');
        });​

Hope this helps!