Question

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

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

为了更好地理解

enter image description here

谢谢

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

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

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

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

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

2 个答案: