javascript - 复选框多值颜色div

Question

我有三个复选框如果至少选中一个值，div 'adi' 的颜色会变为红色，但如果我选中所有值并取消选中其中一个，颜色将恢复正常。我希望只有在我已经取消选中所有三个值之后才会发生这种情况

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

.redBackground{
background-color:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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 class="adi">

asdasdas
</div>

Answer 1

使用 $chb.filter(":checked").length 和 booleanize 使用 > 0 计算检查输入的长度.toggleClass("className", boolean) 来完成这项工作。

var $chb =  $("input[name='groupid']");

$chb.on("change", function(){
  $('.adi').toggleClass("redBackground", $chb.filter(":checked").length > 0 ); 
});

.redBackground{
background-color:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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 class="adi">

asdasdas
</div>