var element = document.querySelector('.element'); // Methods for working with CSS classes via className property var toggleClassName = function(element, className) { element.classList.toggle(className); }; // Event listeners // Listen to change of checkbox "Toggle Class name 'active'" var inputSwitcher = document.querySelector('.switcher'); inputSwitcher.addEventListener('change', function() { toggleClassName(element, 'active'); });
<div class="element"> Element </div> <label> Toggle Class name 'active' <input type="checkbox" class="switcher"> </label>
body { font: normal 0.8rem/2 Helvetica, sans-serif; } .active { color: red; } label { color: blue; display: block; }