Jquery 单击单选按钮即可更改divs背景

我有4个单选按钮，每个按钮分别放在一个div中。 在jQuery中，我想单击一个单选按钮，并更改相关div的颜色。 当我单击第二个单选按钮时，上一个div的颜色应恢复，并且 应更改新单击的单选按钮div颜色。
当我点击一个收音机按钮时，所有的divs颜色都改变了，我只想 选择要更改的项目

$('input:[name=pid]:radio').click(function () {
$(".column-title").css("background", "gray"); 

 below is the html of one div.
 <th><h3 class="column-title" style="height:60px; width:130px; background:#999; border-top-left-radius:10px;border-top-right-radius:10px; margin:0px; padding-top: 13px;">
<div style="color:#FFF; font-size:20px; font-weight:bold; padding-top:15px;"><?=$arr['Deluxe']['title']?></div>
</h3>

<div style="font-size:19px; float:left;padding: 27px 0 0; margin:0px;width:129px; border-right:1px solid #999">
<input type="radio" value="<?=($arr['Deluxe']['id'])?>" name="pid" Checked/>

<div class="new"><?php echo $arr['Deluxe']['price'].'/mon'; ?></div>

<div style="font-size:12px; font-weight:normal;">after your trial</div>

</div>
</th>

$（'input:[name=pid]：radio'）。单击（函数（）{
$（“.column title”）.css（“背景”、“灰色”）；
下面是一个div的html。
审判后

您可以这样做

CSS

.highlight{
background-color:'yellow';
}

HTML

<div class="rdb-container">
<input type="radio" value="1" />
</div>
<div class="rdb-container">
<input type="radio" value="2" />
</div>
<div class="rdb-container">
<input type="radio" value="3" />
</div>
<div class="rdb-container">
<input type="radio" value="4" />
</div>

---

您的选择器错误：

$('input[type=radio][name=pid]').change(function () {

也就是说，您可以将一个类添加到div元素中，然后重新标记一个CSS类，并使用

最近的
方法

.active { background-color: 'red'}


如果您只想更改所选内容，您应该像这样使用
$（'input[name=pid]：radio:selected'）。单击（function（）{//do something}）；
--它会给出所选内容的重复问题：
.active { background-color: 'red'}

$(function() {
   var $divs = $('div.mydivs');

   $('input[type="radio"][name="pid"]').change(function () {
      $divs.removeClass('active');
      $(this).closest('div.mydiv').addClass('active');
   })
})