选择单选按钮时，Jquery是否更改div背景色？

我有两套独立的单选按钮，我希望它的“divs”颜色在被选中时改变。 我想要的行为非常简单，如果选中单选按钮，相应的div应该改变颜色。（如果取消选择，则更改回其原始颜色）

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

使用Jquery：

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

---

对于第二个问题，您需要将块的输入包装到单独的包装器中，并更改一点代码

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>

1套
A.
B
第二套
A.
B

---

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

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>

1套
A.
B
第二套
A.
B

---

不是jQuery，但是您可以查看css规则（嵌套很重要：div.highlight和radio需要是兄弟）：

div.entry{
位置：相对位置；
填充：8px；
宽度：50%；
}
div.entry div.highlight{
背景色：#fff；
位置：绝对位置；
z指数：-1；
顶部：0px；
右：0px；
底部：0px；
左：0px；
}
div.entry输入：选中~div.highlight{
背景颜色：橙色；
}
这是一种选择
这是另一种选择
这是第三种选择

不是jQuery，但您可以查看css规则（嵌套很重要：div.highlight和radio需要是兄弟）：

div.entry{
位置：相对位置；
填充：8px；
宽度：50%；
}
div.entry div.highlight{
背景色：#fff；
位置：绝对位置；
z指数：-1；
顶部：0px；
右：0px；
底部：0px；
左：0px；
}
div.entry输入：选中~div.highlight{
背景颜色：橙色；
}
这是一种选择
这是另一种选择
这是第三种选择

您忘记添加jQuery框架了。。检查这个@Sushanth——为什么不把它作为答案呢？因为它是xDoops，修复了这个问题，但是我的问题仍然存在，你忘了添加jQuery框架。。检查这个@Sushanth——为什么不把它作为答案呢？因为它是xDoops，修复了这个问题，但我的问题仍然存在