/ Published in: jQuery
Custom Radio box, replace with images
Expand |
Embed | Plain Text
Copy this code and paste it in your HTML
/* ------------------------------------------------------------------- Custom Radio ------------------------------------------------------ */ $.fn.cssRadio = function (settings) { var container = this; // defaults settings settings = $.extend({ classOn: "r_on", classOff: "r_off", classOver: "over" }, settings); return container.each( function() { var Elm = this; var inputElm = $(":radio + label", Elm); inputElm .each( function(){ if ( $(this).prev()[0].checked ){ $(this).removeClass(settings.classOff).addClass(settings.classOn); }else{ $(this).removeClass(settings.classOn).addClass(settings.classOff); } }) .addHover(settings.classOver) .bind("click", function() { inputElm .each( function() { if ( $(this).prev()[0].checked ){ $(this).removeClass(settings.classOn).addClass(settings.classOff); $(this).prev()[0].checked = false; } }); $(this).removeClass(settings.classOff).addClass(settings.classOn); $(this).prev()[0].checked = true; return false; }) .prev().css({"position": "absolute", "left": "-3000px"}); }); };