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

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

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