Change bg color when radio btn is selected.

Question

I need to change the bg color of a div containing a radio button when the user slects the button. I am using jquery - so its seems like there should be some simple way to accomplish this. I have my html setup something like this:

<div class="sales_box">
<table>
<tr>
<td class="radio_cell"><input type="radio"></td>
</tr>
</table>
</div>

<div class="sales_box">
<table>
<tr>
<td class="radio_cell"><input type="radio"></td>
</tr>
</table>
</div>

Answer 1

Just handle the change event of the radio button and then use the closest() method of jQuery:

$(document).ready(function(){
    $('input:radio').change(function(){
       $(this).closest('div').css('background-color', 'red');
    });
});

And as redsquare has said, you shouldn't really set inline css. You should use the toggleclass function. I just used the css function as an example.

Answer 2

Try

 $(function() {
        $(".radio_cell input[type=radio]").bind("click", function() {
            $(this).parents('div:first').css("background-color", "Blue");
        });
    });

Answer 3

I would use the toggleClass rather than setting inline css.

$(document).ready(function(){
    $('input:radio').change(function(){
       $(this).closest('div').toggleClass('highlight');
    });
});