更改背景顏色選擇

Question

我有以下代碼

<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; 
    } 

我想要的是：

一旦我選擇任何單選按鈕，像（label_main_selected）類主要DIV變化的背景

感謝

Answer 1

很長的路要走：

$('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'); 
    } 
}); 

短方法（可能會或可能不適合這個目的，取決於正是你以後）：

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

參見：

• 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

Answer 2

$(document).ready(function(){ 
 
    $("input:radio").click(function(){ 
 
     if ($(this).is(":checked")){ 
 
     $("label").css({"color":"green","background-color":"#6600cc"}) && $(this).closest("label").css({"color":"green","background-color":"orange"}); 
 
     } 
 
    }); 
 
});

input[type=radio], 
 
    input[type=checkbox] { 
 
     display: none; 
 
    } 
 
label { 
 
color:white; 
 
font-size:48px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<form> 
 
    <label for="Male"> 
 
    <input type="radio" class="button" id="Male" name="gender">Male 
 
    </label> 
 
    <label for="Female"> 
 
    <input type="radio" class="button" id="Female" name="gender">Female 
 
    </label> 
 
</form>