Posted By

touffies on 11/11/10

Tagged

form
jquery

Versions (?)

Last Edited at 11/11/10 11:57pm

Statistics

Viewed 813 times

Favorited by 2 user(s)

Related snippets

Custom Checkbox

/ Published in: jQuery

Custom checkbox field, replace by images

Expand | Embed | Plain Text

Copy this code and paste it in your HTML

/*  -------------------------------------------------------------------
    Custom Checkbox ---------------------------------------------------- */
    $.fn.cssCheckbox = function (settings) {
        var container = this;
 
        // defaults settings
        settings = $.extend({
            classOn: "c_on",
            classOff: "c_off",
            classOver: "over"
        }, settings); 
 
        return container.each( function() {
            var Elm = this;
            var inputElm = $(":checkbox + label", Elm);
 
            inputElm
            .each( function(){
                $(this).removeClass(settings.classOn).addClass(settings.classOff);
                if ( $(this).prev()[0].checked ){
                    $(this).removeClass(settings.classOff).addClass(settings.classOn);
                }
            })
            .addHover(settings.classOver)
            .bind("click", function() {
                $(this).prev()[0].checked = !$(this).prev()[0].checked;
                $(this).toggleClass(settings.classOn).toggleClass(settings.classOff);
                return false;
            })
            .prev().css({"position": "absolute", "left": "-3000px"});
        });
    };