選中復選框時更改div的背景顏色和字體顏色

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 執行此操作？

為了更好地理解

在此處輸入圖片說明

謝謝

我可以更改背景顏色，但仍然可以更改標題的顏色，這里是

$("#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 個解決方案

解決方案1
1 已采納 2019-01-09 08:53:26

解決方案2
0 2019-01-09 09:01:12

選中復選框時更改div的背景顏色和字體顏色

問題描述

2 個解決方案

解決方案1 1 已采納 2019-01-09 08:53:26

解決方案2 0 2019-01-09 09:01:12

解決方案1
1 已采納 2019-01-09 08:53:26

解決方案2
0 2019-01-09 09:01:12