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

【问题标题】：Change background color and font color of div when checkbox checked选中复选框时更改 div 的背景颜色和字体颜色
【发布时间】：2019-06-03 23:41:18
【问题描述】：

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

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

我要做的是在选中单个/全部复选框时，更改具有 H4 标签的 div 的背景和颜色。当取消选中 div 中的所有复选框时，删除背景颜色和 h4 颜色。如何使用 jquery 或 jquery+javascript 做到这一点？

为了更好的理解

谢谢

我可以更改背景颜色，但仍然可以更改标题颜色，这里是

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

【问题讨论】：

Stack Overflow 不是代码编写服务：请展示您尝试过的内容并解释它在哪些方面不起作用。
因此您正在寻找的解决方案分为两个简单的步骤：1. 检查是否选中了任何复选框 - 看看这个topic 2. 当满足第一步的条件时将类添加到 div。你可以使用toggleClass

标签： javascript jquery css forms checkbox

【解决方案1】：

分配点击处理程序
导航到标题
统计组中的复选框

$("[name='_fiters[]']").on("click", function() {
  var $parent = $(this).closest(".box-body"),
    $h4 = $parent.parents(".box-primary").find("h4");
  $h4.toggleClass("green",$("[name='_fiters[]']:checked", $parent).length > 0);
});

.green {
  background-color: green
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>

【讨论】：

谢谢@mplungjan
假设如果我想更改具有“box-tittle”类的特定 div（不是 h4 标签），该怎么做！
你可以做$thingtochange = $parent.parents(".box-primary").find(".box-title").toggleClass...;

【解决方案2】：

我认为我的代码很基础而且很好。我认为你可以使用这个。

https://codepen.io/furkanbayram2/pen/vvjbMO

var myCheckbox = document.getElementById("myCheckbox");
var myDiv = document.getElementById("myDiv");
function myFunction(){
  if(myCheckbox.checked == true)          myDiv.style.backgroundColor ="lightblue";
  else{
    myDiv.style.backgroundColor ="orange";
  }
}

#myDiv{
height:100px;
background-color:orange;
  margin-bottom:25px;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div class="container">
    <div class="row">
      <div id="myDiv" class="col-md-12">
        <h3>hello world</h3>
      </div>
        <input type="checkbox" onclick="myFunction();" id="myCheckbox" value="Test">Test Checkbox
    </div>
  </div>
</body>
</html>

【讨论】：

这是非常具体的 - 根本不是通用的，也没有使用 jQuery，而是使用内联事件处理程序。这个解决方案没有什么可推荐的。
我将添加到缺陷列表中，您只有一个复选框，但 OP 有多个