Advanced Search

Switch label class for checkbox

/ Published in: jQuery
Save to your folder(s)
ändern der Klasse bei checkbox aktion

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. //check first status with jQuery
  2. //not needed if class initially are set
  3.  
  4. jQuery("#file_aktiv").click(function() {
  5.   if(jQuery(this).is(":checked") === true) 
  6.     jQuery('label[for=file_aktiv]').addClass('file_active');
  7.   else 
  8.     jQuery('label[for=file_aktiv]').addClass('file_active');
  9. });
  10.  
  11. //then
  12. jQuery("#file_aktiv").click(function() {
  13.   jQuery('label[for=file_aktiv]').switchClass('file_active','file_inactive');
  14. });
  15.  
  16. //the switchClass function
  17. (function($){var class1,class2,overrideClass=null;$.fn.switchClass=function(){if(arguments.length<2){alert("Illegal usage. switchClass requires at least 2 parameters, containing the class names to toggle.");return this;}
  18. class1=arguments[0];class2=arguments[1];overrideClass=null;if(arguments.length==3)
  19. overrideClass=arguments[2];return this.each(function(){$.fn.switchClass.process($(this));});};$.fn.switchClass.process=function(el)
  20. {if(overrideClass!=null)
  21. {if(overrideClass==class1&&el.hasClass(class2))
  22. {el.removeClass(class2);el.addClass(class1);}
  23. else if(overrideClass==class2&&el.hasClass(class1))
  24. {el.removeClass(class1);el.addClass(class2);}}
  25. else
  26. {if(el.hasClass(class1))
  27. {el.removeClass(class1);el.addClass(class2);}
  28. else if(el.hasClass(class2))
  29. {el.removeClass(class2);el.addClass(class1);}}};})(jQuery);
  30.  
  31.  
  32. <!-- HTML -->
  33. <input type="checkbox" checked="checked" value="1" id="file_aktiv" name="file_aktiv"/>
  34. <label for="file_aktiv" class="fb_icon file_active">aktiv</label>
  35. <input type="checkbox" checked="checked" value="1" id="file_public" name="file_public"/>
  36. <label for="file_public" class="fb_icon file_public">öffentlich</label>

URL: http://www.interaktionsdesigner.de/2008/11/28/verkettete-funktionen-und-checkboxen-mit-jquery/

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.