JQuery для изменения цвета фона div при выборе переключателя?

Question

У меня есть два разных набора переключателей, и я хочу, чтобы его цвет «divs» изменился, когда его выбрали. Поведение, которое я хочу, довольно просто, если переключатель выбран, соответствующий div должен изменить цвет. (И если вернуться к исходному цвету, измените его).

Однако проблема заключается в том, что выбрана радиокнопка в другом наборе, при этом первый элемент набора возвращается к исходному цвету, даже если одна из его переключателей по-прежнему выбрана. Как это исправить?

See demo here

Jquery используется:

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

Answer 1

Для 2 вопроса вам нужно обернуть-х входов для блока в отдельную обертку и немного изменить свой код ..

JS

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

Answer 2

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