jquery - 单击复选框时更改div的背景颜色

Question

我有一个带有多个复选框的表单，如下所示：

<div><input type='checkbox' name='groupid' value='1'>1</div>
<div><input type='checkbox' name='groupid' value='2'>2</div>
<div><input type='checkbox' name='groupid' value='3'>3</div>

我想要做的是当复选框被选中时，更改 div 的背景颜色，当它未被选中时，删除背景颜色。我怎样才能使用 jquery 做到这一点？

谢谢

Answer 1

jQuery：

$("input[type='checkbox']").change(function(){
    if($(this).is(":checked")){
        $(this).parent().addClass("redBackground"); 
    }else{
        $(this).parent().removeClass("redBackground");  
    }
});

CSS：

.redBackground{
    background-color: red;  
}

我建议使用添加/删除类，而不是直接更改父级的 CSS div。

演示：http: //jsfiddle.net/uJcB7/

Answer 2

一种直接更改 CSS 属性的解决方案：

$(":checkbox").on("change", function() {
    var that = this;
    $(this).parent().css("background-color", function() {
        return that.checked ? "#ff0000" : "";
    });
});​

演示：http: //jsfiddle.net/YQD7c/

---

另一种解决方案使用toggleClass：

$(":checkbox").on("change", function() {
    $(this).parent().toggleClass("checked", this.checked);
});​

在 CSS 中定义类checked的位置如下：

.checked {
    background-color: #ff0000;
}​

演示：http: //jsfiddle.net/YQD7c/1/

Answer 3

我知道这是一个旧线程，但我来搜索并且这个答案让我大部分时间。（需要对 WordPress 进行一些调整）因此，如果其他人登陆使用 WordPress 的同一页面，请试一试，对我来说非常有用。

剧本

jQuery("input[type='checkbox']").change(function(){
if(jQuery(this).is(":checked")){
    jQuery(this).parent().addClass("greenBackground"); 
}
else{
    jQuery(this).parent().removeClass("greenBackground");  
} });

CSS

.greenBackground{
background-color: #06530e;  
color: #ffffff;}