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;  
}

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

DEMO：http://jsfiddle.net/uJcB7/

Answer 2

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

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

DEMO： http://jsfiddle.net/YQD7c/

使用toggleClass的另一种解决方案：

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

在CSS中定义类checked的地方如下：

.checked {
    background-color: #ff0000;
}

DEMO： 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;}

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

3 个答案: