jquery 在选择单选按钮时更改 div 背景颜色？

Question

我有两组独立的单选按钮，我希望它的“div”颜色在被选中时发生变化。我想要的行为非常简单，如果单选按钮被选中，相应的 div 应该改变颜色。 (如果取消选择，则变回原来的颜色)。

但是，问题是如果选择了另一组中的单选按钮，即使其中一个单选按钮仍处于选中状态，第一组的 div 也会变回其原始颜色。我该如何解决这个问题？

See demo here

使用了Jquery:

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

Answer 1

对于第二期，您需要将 block 的输入包装到单独的包装器中并更改一些代码..

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