Javascript 选中复选框时更改div的背景色和字体颜色

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

<div class="panel box box-primary">
  <div class="box-header with-border">

    <!--Change Header Color and Background-->

    <h4 class="box-title">
      <a data-toggle="collapse" data-parent="#accordion" href="#Gender" aria-expanded="true" class="">Gender</a>
    </h4>
  </div>
  <div id="Gender" class="panel-collapse collapse in">
    <div class="box-body">
      <div class="col-md-4">

        <!--When a single/all checkboxes are checked-->

        <ul>
          <li><input type="checkbox" name="_fiters[]" value="1">1</li>
          <li><input type="checkbox" name="_fiters[]" value="2">1</li>
        </ul>
      </div>
    </div>
  </div>
</div>

分配一个单击处理程序

导航到标题

对组中的复选框进行计数

$（“[name=”“fiters[]]”）。在（“单击”，函数（）上）{
var$parent=$（this）.closest（“.body”），
$h4=$parent.parents（“.box primary”）.find（“h4”）；
$h4.toggleClass（“绿色”、$（“[name=”\u fiters[]”]：选中“，$parent”）。长度>0）；
});
.green{
背景颜色：绿色
}


一,
一,

我认为我的代码是基本的，而且很好。。我想你可以用这个



var myCheckbox=document.getElementById（“myCheckbox”）；
var myDiv=document.getElementById（“myDiv”）；
函数myFunction（）{
如果（myCheckbox.checked==true）myDiv.style.backgroundColor=“浅蓝色”；
否则{
myDiv.style.backgroundColor=“橙色”；
}
}
#myDiv{
高度：100px；
背景颜色：橙色；
边缘底部：25px；
}

文件
你好，世界
测试复选框
不是一项代码编写服务：请展示您尝试过的内容，并解释它不起作用的方式。因此，您正在寻找的解决方案分为两个简单步骤：1。检查是否选中了任何复选框-查看这2个复选框。当满足第一步中的条件时，将类添加到div。您可以使用非常具体的方法—完全不是泛型的，也不使用jQuery，而是使用内联事件处理程序。这个解决方案没有什么值得推荐的。我想在缺陷列表中添加一个复选框，但是OP有multipleThanks@mplungjanAstence，如果我想更改具有类“box title”的特定div（而不是h4标记），它将如何执行！您可以执行以下操作：
$thingtochange=$parent.parents（“.box primary”）.find（“.box title”）.toggleClass
$("#Gender input[type='checkbox']").change(function(){
    if($(this).is(":checked")){
        $(this).parent().addClass("redBackground"); 
    }else{
        $(this).parent().removeClass("redBackground");  
    }
});