Question

我有4个单选按钮，每个按钮单独用div括起来。

在jQuery中，我想单击一个单选按钮并使相关div的颜色发生变化。

单击第二个单选按钮时，应恢复上一个div的颜色，并且应更改新单击的单选按钮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

这应该让你开始。

<强> HTML：

<div>    
   <input type="radio" name="test" value="red" />
</div>
<div>
  <input type="radio" name="test" value="blue" />    
</div>

<强> CSS：

.red {
    background-color: red;
}

.blue {
    background-color:blue;
}

<强>使用Javascript：

$(document).ready(function () {
    $('input:radio').click(function () {
         $(this).parent().addClass(this.value);
         $(this).parent().siblings().removeAttr('class');
    });
});

修改

更新以包含完整答案。要删除包含未选中单选按钮的div的背景颜色，只需获取所有兄弟div元素并删除它们的类属性。

尝试一下：http://jsfiddle.net/YadN6/2/

一个div与背景颜色＃999。在它另一个带输入按钮的div

1 个答案: