单击复选框时更改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;  
}

我建议使用Add/Remove类,而不是直接更改父级的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);
});?

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

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

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