當選擇單選按鈕時，jquery更改div背景顏色？

我有兩個單獨的單選按鈕組，我希望它的'divs'顏色在選定時改變。我想要的行爲很簡單，如果單選按鈕被選中，相應的div應該改變顏色。（如果取消選擇，則變回原來的顏色）。當選擇單選按鈕時，jquery更改div背景顏色？

但是，問題是如果選中另一組中的單選按鈕，即使其中一個單選按鈕仍處於選中狀態，第一組div仍會變回其原始顏色。我該如何解決？

jQuery的使用：

$(document).ready(function(){ 
    $('input:radio').change(function(){ 
     $('div.highlight').removeClass('highlight'); 
     $(this).closest('div').addClass('highlight'); 
    }); 
});

來源

2013-07-31 user2189190

您忘了添加jQuery框架了..檢查此h ttp：//jsfiddle.net/sushanth009/wCNAp/1/ –

@ Sushanth--你爲什麼不把這個作爲答案？，因爲它是xD – jsedano

oops，修正了這個問題，但我的問題依然存在 – user2189190

對於你需要用你的輸入，針對塊到一個單獨的包裝，並更改了一下你的代碼的第二個問題..

$(document).ready(function(){ 
    $('input:radio').change(function(){ 
     var $this = $(this); 
     // Only remove the class in the specific `box` that contains the radio 
     $this.closest('.box').find('div.highlight').removeClass('highlight'); 
     $this.closest('.q').addClass('highlight'); 
    }); 
});

HTML

<div class="box"> 1st set 
    <div class="q"> 
     <input type="radio" id="1" name="11" /> 
     <label for 1>a</label> 
    </div> 
    <div class="q"> 
     <input type="radio" id="2" name="11" /> 
     <label for 2>b</label> 
    </div> 
</div> 
<div class="box"> 
    <hr> 2nd set 
    <div class="q"> 
     <input type="radio" id="3" name="22" /> 
     <label for 3>a</label> 
    </div> 
    <div class="q"> 
     <input type="radio" id="4" name="22" /> 
     <label for 4>b</label> 
    </div> 
</div>

Check Fiddle

來源

2013-07-31 23:09:26

不是jQuery的，但你可以看看CSS規則（嵌套是重要的：div.highlight和無線電需要是兄弟姐妹）：

Dabblet example of below

div.entry { 
    position: relative; 
    padding: 8px; 
    width: 50%; 
} 
div.entry div.highlight { 
    background-color: #fff; 
    position: absolute; 
    z-index: -1; 
    top: 0px; 
    right: 0px; 
    bottom: 0px; 
    left: 0px; 
} 
div.entry input:checked ~ div.highlight { 
    background-color: orange; 
} 

<div class="entry"> 
    <input type="radio" name="list" />This is one option 
    <div class="highlight"></div> 
</div> 
<div class="entry"> 
    <input type="radio" name="list" />This is another option 
    <div class="highlight"></div> 
</div> 
<div class="entry"> 
    <input type="radio" name="list" />This is a third option 
    <div class="highlight"></div> 
</div>

來源

2013-07-31 23:40:15

當選擇單選按鈕時，jquery更改div背景顏色？

回答

相關問題