Wordpress jQuery - addClass when checkbox is checked and then remove when unchecked

Question

I am creating a wordpress theme customizer that updates in realtime - it does this via javascript. One of the options is a checkbox to either add the class "transparent" when checked or remove it when unchecked to an element.

Here is the javascript I have:

wp.customize( 'header_transparent_menu', function( value ) {
    value.bind( function( to ) {
        $( '#header.alt' ).addClass('transparent', to );
    } );
});

Currently this adds the class to the element when checked, but I can't figure out how to remove it when unchecked.

Answer 1

Replace addClass with toggleClass. Below is a custom example to show you how this may work in practice.

$(document).ready(function() {
    $("#check").change(function() { 
        $("#header.alt").toggleClass("blue"); 
    });
});

And JSFiddle: http://jsfiddle.net/FSNL3/1/

If you populate the form with data, remember to automaticaly apply class on load, if the checkbox is checked. Then, the snippted above will do the work for you.