Custom Checkbox


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

Custom checkbox field, replace by images


Copy this code and paste it in your HTML
  1. /* -------------------------------------------------------------------
  2.   Custom Checkbox ---------------------------------------------------- */
  3. $.fn.cssCheckbox = function (settings) {
  4. var container = this;
  5.  
  6. // defaults settings
  7. settings = $.extend({
  8. classOn: "c_on",
  9. classOff: "c_off",
  10. classOver: "over"
  11. }, settings);
  12.  
  13. return container.each( function() {
  14. var Elm = this;
  15. var inputElm = $(":checkbox + label", Elm);
  16.  
  17. inputElm
  18. .each( function(){
  19. $(this).removeClass(settings.classOn).addClass(settings.classOff);
  20. if ( $(this).prev()[0].checked ){
  21. $(this).removeClass(settings.classOff).addClass(settings.classOn);
  22. }
  23. })
  24. .addHover(settings.classOver)
  25. .bind("click", function() {
  26. $(this).prev()[0].checked = !$(this).prev()[0].checked;
  27. $(this).toggleClass(settings.classOn).toggleClass(settings.classOff);
  28. return false;
  29. })
  30. .prev().css({"position": "absolute", "left": "-3000px"});
  31. });
  32. };

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.