I have in my code:

                jQuery("span[class='checkbox']").addClass("unchecked");

                jQuery("span[class='checkbox'] input:checked").parent().removeClass("unchecked");

                jQuery("span[class='checkbox'] input:checked").parent().addClass("checked");

The intended effect is for spans of class "checkbox", which should each contain one checkbox, to have the class "checked" if the checkbox is checked, "unchecked" if not.

When I load the page and do an "inspect element", the spans have class "checkbox" but none of them have either the class "checked" or "unchecked".

Any suggestions?