Question

我有4个单选按钮，每个按钮单独包含在div中。在jQuery中，我想单击一个单选按钮并使相关div的颜色发生变化。当我单击第二个单选按钮时，前一个div的颜色应该恢复并且 newclicked单选按钮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>

Answer 1

你可以这样做

<强> 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>

<强> JQUERY

$(document).ready(function(){
 $('div.rdb-container input[type="radio"]').click(function(){
    $('div.rdb-container').removeClass('highlight');
    $(this).parent('div.rdb-container:first').addClass('highlight');
   });
});

Answer 2

你的选择器错了：

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

话虽如此，你可以在div元素中添加一个类，decalre一个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');
   })
})

单击单选按钮更改div背景

2 个答案: