How to reset the background of parent of the radio button when unchecked?

Question

I have created one group of radio buttons in a table like

    <table cellpadding="0" cellspacing="0" border="0">
    <tbody>
        <tr>
            <td>
                <input type="radio" name="radios" id="8-9" />
                <label for="8-9">08-09 am</label>
            </td>
        </tr>
        <tr>
            <td>
                <input type="radio" name="radios" id="9-10" />
                <label for="9-10">09-10 am</label>
            </td>
        </tr>
    </tbody>
</table>

and when any of the radio button clicked then the background of parent is need to be changed and JQuery for it is like-

$(document).on('click', '#8-9', function (event) {
    $checked = $("#8-9").is(':checked');
    if ($checked) {
        $(this).parent().css("background-color", "#000");
        $(this).parent().css("color", "#fff");
    } else {
        $(this).parent().css("background-color", "#ff0000");
        $(this).parent().css("color", "#fff");
    }
});

$(document).on('click', '#9-10', function (event) {
    $checked = $("#9-10").is(':checked');
    if ($checked) {
        $(this).parent().css("background-color", "#000");
        $(this).parent().css("color", "#fff");
    } else {
        $(this).parent().css("background-color", "#252525");
        $(this).parent().css("color", "#fff");
    }
});

this code is working , when radio is clicked the background of parent is changed, but when radio is unchecked the background of parent is not been reset to default. Is there any mistake in my script or any other way is there of this?

Answer 1

Check this : http://jsfiddle.net/ChaitanyaMunipalle/R4htK/

First you have to reset css of parent of radio buttons and then set which ever is checked.

$('input[name=radios]').on('change', function() {
    $('input[name=radios]').parent().css("background-color", "#ff0000");
    $('input[name=radios]').parent().css("color", "#fff");
    $(this).parent().css("background-color", "#000");
    $(this).parent().css("color", "#fff");
});

Answer 2

You can optimize the code like below

$(document).on('change', '.radioBtn', function (event) {
    $('.radioBtn').parent().css("background-color", "#FFF").css("color", "#000");
    $(this).parent().css("background-color", "#000").css("color", "#fff");
});

And modify the HTMl like this,

<table cellpadding="0" cellspacing="0" border="0">
    <tbody>
        <tr>
            <td>
                <input type="radio" name="radios" id="8-9" class="radioBtn" />
                <label for="8-9">08-09 am</label>
            </td>
        </tr>
        <tr>
            <td>
                <input type="radio" name="radios" id="9-10" class="radioBtn"/>
                <label for="9-10">09-10 am</label>
            </td>
        </tr>
    </tbody>
</table>

Check this http://jsfiddle.net/8fWZG/1/

You need to modify the color codes as per your requirement.

Answer 3

the problem is that your binding to the radio buttons separately so the click only happens once. Try this

var selected = null;

$(document).on("click", "input[type='radio']", function(){
    if(selected != null){
        selected.parent().css({backgroundColor:"white", color:"black"});
    }

    $(this).parent().css({backgroundColor:"black", color:"white"});
    selected = $(this);
})   

http://jsfiddle.net/ricobano/YBW9c/