我有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>
答案 0 :(得分: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元素并删除它们的类属性。