选择单选按钮时更改背景颜色

Question

当用户选择按钮时，我需要更改包含单选按钮的 div 的背景颜色。我正在使用 jquery - 所以看起来应该有一些简单的方法来完成这个。我的 html 设置是这样的：

<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

只需处理单选按钮的change事件，然后使用jQuery的closest()方法即可：

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

正如 redsquare 所说，您不应该真正设置内联 css。您应该使用toggleclass 函数。我只是以css函数为例。

Answer 2

试试

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

Answer 3

我会使用 toggleClass 而不是设置内联 css。

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