Change background color on radio select

Question

I have the following code

 <form id="form1" name="form1" method="post">
     <table width="100%" border="0" cellspacing="0" cellpadding="0">

  <tr>
      <td ><div class="label_main" id="lab1">
        <div class="label_radio">
          <input type="radio" name="group1" id="r0" value="0" />
        </div>
        <div class="label_top">
          <label for="r0">Group1</label>
        </div>
        <div class="label_desc">
          <label for="r1">Members of Groups1 </label>
        </div>
      </div>
          </div>    </tr>
    <tr>
      <td><div class="label_main">
        <div class="label_radio">
          <input type="radio" name="group1" id="r1" value="1" />
        </div>
        <div class="label_top">
          <label for="r1">Groups2</label>
        </div>
        <div class="label_desc">
          <label for="r1">Only Group 2 </label>
        </div>
      </div></td>
    </tr>
</table>
</form>



.label_main_selected
    {
    padding-top:0px;
    float:left;
    background:#E9ECFF;
    }

What I want is:

Once I select any radio button, background of main DIV change like (label_main_selected) class

Thanks

Answer 1

The long way:

$('input:radio').click(function() {
    if($(this).is(':checked')) {

        //select the main div wrapping this radio
        $(this).parent().parent().addClass('.label_main_selected');

        //or you can do
        //$(this).closest('.label_main').addClass('.label_main_selected');
    } else {
        $(this).parent().parent().removeClass('.label_main_selected');
        //or $(this).closest('.label_main').removeClass('.label_main_selected');
    }
});

The short way (may or may not be suitable for this purpose, depends on exactly what you're after):

$('input:radio').click(function() {
    $(this).parent().parent().toggleClass('.label_main_selected');
    //or $(this).closest('.label_main').toggleClass('.label_main_selected');
});

See:

• http://docs.jquery.com/Attributes/addClass
• http://docs.jquery.com/Attributes/removeClass
• http://docs.jquery.com/Attributes/toggleClass
• http://docs.jquery.com/Selectors/radio
• http://docs.jquery.com/Selectors/closest