Question

I’m wanting to change the background color on something depending on if it’s child is checked or not, AND on whether or not it has the checked='checked' attribute in the HTML.

Basically, this is what I want:

• If it’s checked by default (with checked='checked') and the user unticks it, red background
• If it’s checked by default, but no longer checked (user unticked it), but the user ticks it again, green background
• If it’s unchecked by default, and the user checks it, blue background
• If it’s unchecked by default, and the user checks it and then unchecks it, white background…

This is what I’ve got so far:

    $(document).ready(function(){
        $("#memberForm input").change(function() {
            if($(this).is(":checked") == true ) {
                $(this).closest('dt').css({"background" : "green"});
            }
            else {
                $(this).closest('dt').css({"background" : "red"}); }
        });
    });

I don’t know how to incorporate the default value in the results…

Answer 1

You could add a class to all checked inputs on initial load:

$("input:checked").addClass("waschecked");

Then just check if that input has the class to tell if it was checked on initial load:

$(this).hasClass("waschecked")