0

我有 4 个单选按钮，每个按钮分别包含在一个 div 中。在 jQuery 中，我想单击一个单选按钮并更改相关 div 的颜色。当我单击第二个单选按钮时，前一个 div 的颜色应该恢复并且新单击的单选按钮 div 颜色应该改变。
当我单击单选按钮时，所有 div 颜色都已更改，我只想选择更改

$('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>
4

2 回答 2

0

您的选择器错误：

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

话虽如此，您可以向 div 元素添加一个类，贴一个 CSS 类并使用closest方法。

.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');
   })
})
于 2013-02-08T06:57:42.337 回答
0

你可以这样做

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>

查询

$(document).ready(function(){
 $('div.rdb-container input[type="radio"]').click(function(){
    $('div.rdb-container').removeClass('highlight');
    $(this).parent('div.rdb-container:first').addClass('highlight');
   });
});
于 2013-02-08T06:57:17.230 回答