Question

I am working with this code: (Updated)

   <script>
$(function(){
//Radio Item 1
$("#radio1").change(function() {

$("#defaultwrapper").addClass("background_color_selected");
$("#default_wrapper").removeClass("def_background_color");

});

//Radio Item 2
$("#radio2").change(function() {

$("#default_wrapper2").addClass("background_color_selected");
$("#default_wrapper2").removeClass("def_background_color");

});



});
</script>

My problem is that I need the background-color of the selected radio to change and it’s not toggling right now

Answer 1

(Update)
In jQuery no event is fired when radio is unselected. Try to create global handler:

$(function(){
    $("input[type=radio]").change(function() {
        $("input[type='radio']", $(this).parent().parent()).each(function() {
            $(this).parent()
                .toggleClass("background_color_selected", this.checked)
                .toggleClass("def_background_color", !this.checked);
        });
    });
});

For html:

<div>
    <div class="def_background_color"><input type="radio" id="radio1" name="aaa" /> One</div>
    <div class="def_background_color"><input type="radio" id="radio2" name="aaa" /> Two</div>
</div>

Working sample: http://jsfiddle.net/THrYJ/