0

私は4つのラジオボタンを持っており、それぞれが別々にdivで囲まれています。jQueryで、ラジオボタンをクリックして、関連するdivの色を変更したいと思います。2番目のラジオボタンをクリックすると、前の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

あなたはこのようにすることができます

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>

Jクエリ

$(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 に答える
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 に答える