选中复选框时更改 div 的背景颜色和字体颜色
Posted
技术标签:
【中文标题】选中复选框时更改 div 的背景颜色和字体颜色【英文标题】：Change background color and font color of div when checkbox checked 【发布时间】：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 【参考方案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 有多个以上是关于选中复选框时更改 div 的背景颜色和字体颜色的主要内容，如果未能解决你的问题，请参考以下文章