JavaScript to Change CSS Class Based on Check Box State

Sean Biefeld — Mon, 24 Nov 2008 23:53:31 +0000

Here is some useful JavaScript that wrote today to change a CSS class based on the state of a checkbox.

function replaceCssClassOnElementBasedOnCheckBoxState(checkboxId, elementToChangeId, checkedCssClassName, uncheckedCssClassName)
{
    var selectedElement = document.getElementById(elementToChangeId);
    var checkBox = document.getElementById(checkboxId);
    if(selectedElement && checkBox)
    {
        if(checkBox.checked)
            selectedElement.className = checkedCssClassName;
        else
            selectedElement.className = uncheckedCssClassName;
    }
}

For Example:

Check This!

The style of this div should change based on the state of the checkbox.

Musings<Biefeld> » Check Box

JavaScript to Change CSS Class Based on Check Box State