一格的背景颜色为#999.在它与输入按钮的另一个div [英] one div with background color #999. in it another div with input button

问题描述

我有4个单选按钮，每个按钮分别包含在div中.

I have 4 radio buttons, each is enclosed in a div seperately.

在jQuery中，我想单击一个单选按钮并更改相关div的颜色.

In jQuery, I want to click a radio button and have the color of related div change.

当我单击第二个单选按钮时，应恢复以前的div的颜色，而应重新单击新单击的单选按钮div的颜色.

When I click 2nd radio button, the previous div's color should restored and the newly clicked radio buttons div color should changed.

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

推荐答案

这应该可以帮助您入门.

This should get you started.

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元素并删除其class属性即可.

Updated to include the full answer. To remove the background color of the div containing the non-selected radio button, simply get all the sibling div elements and remove their class attribute.

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

这篇关于一格的背景颜色为#999.在它与输入按钮的另一个div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！