Custom Radio box


/ Published in: jQuery
Save to your folder(s)

Custom Radio box, replace with images


Copy this code and paste it in your HTML
  1. /* -------------------------------------------------------------------
  2.   Custom Radio ------------------------------------------------------ */
  3. $.fn.cssRadio = function (settings) {
  4. var container = this;
  5.  
  6. // defaults settings
  7. settings = $.extend({
  8. classOn: "r_on",
  9. classOff: "r_off",
  10. classOver: "over"
  11. }, settings);
  12.  
  13. return container.each( function() {
  14. var Elm = this;
  15. var inputElm = $(":radio + label", Elm);
  16.  
  17. inputElm
  18. .each( function(){
  19. if ( $(this).prev()[0].checked ){
  20. $(this).removeClass(settings.classOff).addClass(settings.classOn);
  21. }else{
  22. $(this).removeClass(settings.classOn).addClass(settings.classOff);
  23. }
  24. })
  25. .addHover(settings.classOver)
  26. .bind("click", function() {
  27. inputElm
  28. .each( function() {
  29. if ( $(this).prev()[0].checked ){
  30. $(this).removeClass(settings.classOn).addClass(settings.classOff);
  31. $(this).prev()[0].checked = false;
  32. }
  33. });
  34. $(this).removeClass(settings.classOff).addClass(settings.classOn);
  35. $(this).prev()[0].checked = true;
  36.  
  37. return false;
  38. })
  39. .prev().css({"position": "absolute", "left": "-3000px"});
  40. });
  41. };

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.