Change background color and font color of div when checkbox checked

Question

I have a form with several check boxes, like this:

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

What I'm trying to do is when the single/all check box is checked, change the background and color of the div which have the H4 tag. When unchecked all checkbox within div, remove the background color and h4 color. How can I do this using jquery or jquery+javascript?

for better understanding

enter image description here

Thanks

I am able to change the background color and but still enable to change the color of heading, here it is

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

[SO] is not a code writing service: please show what you have tried and explain in what way it is not working. — Richard, Jan 09 '19 at 08:42
So solution you are looking for is divided to two simple steps: 1. Check if any checkbox is checked - look at this [topic](https://stackoverflow.com/questions/2204250/check-if-checkbox-is-checked-with-jquery?rq=1) 2. Add class to div when condition from first step is met. You can use [toggleClass](http://api.jqueryui.com/toggleClass/) — Andreew4x4, Jan 09 '19 at 09:00

mplungjan · Accepted Answer · 2019-01-09T09:17:25.450

Assign a click handler
Navigate to the title
Count the checked boxes in the group

$("[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>

Suppose if i want to change the specific div (not the h4 tag) which has the class "box-tittle" how it would be done! — , Jan 10 '19 at 07:00
You can do `$thingtochange = $parent.parents(".box-primary").find(".box-title").toggleClass...;` — mplungjan, Jan 10 '19 at 07:05

score 0 · Answer 2 · answered Jan 09 '19 at 09:01

I think my code was be basic and its good.. i think you can use this one.

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>

This is VERY specific - not generic at all and not using jQuery and instead is using inline event handlers. There is nothing recommendable about this solution at all. — mplungjan, Jan 09 '19 at 09:09
I'd add to list of flaws that you have only one checkbox, but OP has multiple — barbsan, Jan 09 '19 at 10:56

Change background color and font color of div when checkbox checked

2 Answers2