在單選中更改背景顏色

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

我想要的是：

選擇任何單選按鈕后，主DIV的背景將發生變化，如（label_main_selected）類

謝謝

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> 

Answer 3

$('input:radio').click(function() {
    var selected = $(this).val();
    $(".checkboxtable").find("tr").each(function() {
        var idx = $(this).data("id");
        if(idx == selected){
            $("#dspackage-"+idx).addClass("bg");    
        }else{
            $("#dspackage-"+idx).removeClass("bg");    
        }
    });
});