一格與背景顏色＃999。在其中另一個輸入按鈕div

-2

我有4個單選按鈕，每個單獨包含在div中。一格與背景顏色＃999。在其中另一個輸入按鈕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>

來源

2013-02-08 user2042007

我有表四頭每頭有單選按鈕，一個div我想，當我點擊一個單選按鈕在div顏色應改變 – user2042007

因此不爲人們的地方爲你編寫代碼。對它進行破解，向我們展示你的想法，並解釋什麼不起作用。你所描述的與jQuery非常簡單。這並不意味着你不應該自己嘗試。 – isherwood

我沒有太大的意識jquery – user2042007

這應該讓你開始。

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屬性。

試試看：http://jsfiddle.net/YadN6/2/

來源

2013-02-08 03:06:11 Tuan

未選中後，單選按鈕不能恢復正常的顏色 – user2042007

我知道。我只是想讓你開始。我想我會把剩下的東西留給你去嘗試弄清楚，因爲你的問題得到了一些贊成票。如果你嘗試了，而你無法得到它，請告訴我，我會很樂意提供幫助。但請先嚐試。 – Tuan

謝謝我會盡力讓你知道 – user2042007

一格與背景顏色＃999。在其中另一個輸入按鈕div

回答

相關問題