Return to Snippet

Revision: 35667
at November 11, 2010 23:57 by touffies


Initial Code
/*  -------------------------------------------------------------------
    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"});
        });
    };

Initial URL


Initial Description
Custom checkbox field, replace by images

Initial Title
Custom Checkbox

Initial Tags
form, jquery

Initial Language
jQuery