Javascript JQuery-多个复选框操作

我有一个带有多个复选框的表单，我希望获得以下行为：

• 选中复选框后，“my_class”父div的背景会发生变化
• 顶部按钮可以选中或取消选中所有复选框
• 单击按钮时，所有“my_class”div的背景都会更改

CSS、HTML和JS代码

$（文档）.ready（函数（）{
$（“.check_all:button”）.toggle（函数（）{
$（“输入：复选框”）.attr（“选中”、“选中”）；
$（“输入：复选框”）.closest（.my_class”）.addClass（“checked_bg”）；
$（this.val）（“全部取消选中”）
},
函数（）{
$（“输入：复选框”）.removeAttr（“选中”）；
$（“输入：复选框”）.closest（.my_类”）.removeClass（“checked_bg”）；
$（此）.val（“全部检查”）；
});
$（“输入：复选框”）。打开（“更改”，函数（）{
var=这个；
$（this）.closest（“.my_class”）.css（“背景色”，函数（）{
返回该项。选中？#bcfab9:“#ffffff”；
});
});
});
。已选中\u bg{
背景色：#bcfab9；
}





Lorem ipsum dolor sit amet，是一位杰出的献身者。
两人坐在一起。
最重要的是，它是一种温和的宗教信仰，是一种宗教信仰。
福斯·尼西·托托（Fusce nisi tortor）、苏西普·卢克图斯·欧盟（luctus eu）、马萨（varius eget massa）。
我发现了一些问题：


不能将所有内容都放在
标签中

切换
将立即隐藏
按钮
，因为它必须这样做。你需要一个
点击
事件监听器和一些决定，做什么

要选中这些框，您需要使用
.prop（）
而不是
.attr（）
如果您也想触发
复选框的
更改
事件，则需要手动触发它

请记住，按钮添加了一个类，
change
事件添加了一个
背景色
。这可能有一个strage行为。如果要防止背景色在
取消选中“全部”
后继续存在，则还需要删除
背景色，或手动触发事件，如前所述



$（文档）.ready（函数（）{
$（“.check_all:button”）。在（'click'，function（）上{
var复选框=$（“输入：复选框”）；
if（$（this.val（）=“全选”）{
复选框。道具（“选中”，为真）。最近（“.my_class”）。addClass（“选中”；
$（this.val）（“全部取消选中”）
}
否则{
复选框。prop（“选中”，false）。最近（“.my_类”）。removeClass（“选中”；
$（此）.val（“全部检查”）；
}
});
$（“输入：复选框”）。打开（“更改”，函数（）{
var=这个；
$（this）.closest（“.my_class”）.css（“背景色”，函数（）{
返回该项。选中？#bcfab9:“#ffffff”；
});
});
});
。已选中\u bg{
背景色：#bcfab9；
}




复选框1
Lorem ipsum dolor sit amet，是一位杰出的献身者。
两人坐在一起。
复选框2
最重要的是，它是一种温和的宗教信仰，是一种宗教信仰。
福斯·尼西·托托（Fusce nisi tortor）、苏西普·卢克图斯·欧盟（luctus eu）、马萨（varius eget massa）。
Hi-eisbehr。非常感谢您快速而相关的回答。你提到我不能把所有的东西都放在一个文件夹中，但我知道现实生活中复选框是隐藏的，用户需要点击“my_class”div中的任意位置来检查。我不明白你想告诉我什么。但将所有内容放入标签中时，它不是有效的html@吉贝吉