Javascript 在复选框上单击“动态显示隐藏具有相同类的div”

我想点击复选框并隐藏相应的内容

现在，在我的代码中，当我单击任何一个复选框时，具有相同类的所有内容都被隐藏

Since my front end tags are in apex I do not want to use id, attr, name,value. I want to use class and fix this issue, exactly in the way I have written in this fiddle.

供参考的小提琴链接

$（'input[type=“checkbox”]）。单击（函数（）{
如果（$（this）.is（“：checked”））{
$（'.div1'）.hide（）；
}否则{
$（'.div1'）.show（）；
}
});
此JavaScript显示如何隐藏分区
Exam1
我很满足！


Exam2
我很满足！


Exam3
我很满足！


Exam4
我很满足！


试试这个

$（'input[type=“checkbox”]）。单击（函数（）{
（$（this）.is（“：checked”）？$（this.next（）.hide（）：$（this.next（）.show（））；
});
试试这个

$（'input[type=“checkbox”]）。单击（函数（）{
（$（this）.is（“：checked”）？$（this.next（）.hide（）：$（this.next（）.show（））；
});
尝试在开始时用class
div1
隐藏所有div

 $(".div1").hide();
 $('input[type="checkbox"]').click(function() {
     $(this).next('.div1').toggle(!this.checked); //toggle(false) will hide the element
 });

使用
next（）
和
toggle（）

尝试在开始时用class
div1
隐藏所有div

 $(".div1").hide();
 $('input[type="checkbox"]').click(function() {
     $(this).next('.div1').toggle(!this.checked); //toggle(false) will hide the element
 });

使用
next（）
和
toggle（）

这对我有效，我必须导航到我的div的父级并应用它。这对我有效，我必须导航到我的div的父级并应用它。