Изменить цвет фона и шрифта div, когда установлен флажок - PullRequest
Новая
       1

Изменить цвет фона и шрифта div, когда установлен флажок

0 голосов
/ 09 января 2019

У меня есть форма с несколькими флажками, например: 

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

То, что я пытаюсь сделать, это когда флажок одиночный / все установлен, изменить фон и цвет div, который имеет тег H4. Если снять флажок «все» внутри 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");  
    }
});

Ответы [ 2 ]

0 голосов
/ 09 января 2019

Я думаю, что мой код был базовым и его хорошо .. я думаю, вы можете использовать этот.

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>
0 голосов
/ 09 января 2019
  1. Назначить обработчик кликов
  2. Перейти к названию
  3. Подсчитать флажки в группе 

$("[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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...