Javascript 使用多个复选框显示/隐藏内容

我需要隐藏一个SVG图形并显示一个图标。 事件必须由不可见的复选框处理。问题在于，当触发

onchange

事件时，所有复选框都会被选中，因此所有图标都会显示，所有输入都会被选中

您知道如何分别为每个

输入[type=“checkbox”]

设置事件处理程序吗

var$checkbox=$（'.form-control'），
$iconCheck=$（'.check circle'），
$imgSVG=$（'.img'）；
$（$复选框）.on（'change'，function（））{
如果（$（this）.is（':checked'））{
$iconCheck.removeClass（'d-none'）；
$imgSVG.addClass（'d-none'）；
}否则{
$iconCheck.addClass（'d-none'）；
$imgSVG.removeClass（'d-none'）；
}
});
img{
显示：块；
宽度：40px；
高度：40px；
}
d-无{
显示：无；
}

选中的！
恐怖
选中的！
喜剧片
我有一个答案，没有
javascript

你可以用
CSS技巧解决这个问题


/*var$checkbox=$（'.form-control'），
$iconCheck=$（'.check circle'），
$imgSVG=$（'.img'）；
$（$复选框）.on（'change'，function（））{
如果（$（this）.is（':checked'））{
$（this.parent（）.children（'.check circle'）.removeClass（'d-none'）；
//$iconCheck.removeClass（'d-none'）；
$imgSVG.addClass（'d-none'）；
}否则{
$iconCheck.addClass（'d-none'）；
$imgSVG.removeClass（'d-none'）；
}
});*/
img{
显示：块；
宽度：40px；
高度：40px；
}
d-无{
显示：无；
}
输入[type=checkbox]。表单控件：选中+图>img{
显示：无；
}
输入[type=checkbox]。表单控件：选中+图>。选中圆圈{
显示：块；
}

恐怖
选中的！
喜剧片
选中的！
我有一个答案，没有
javascript

你可以用
CSS技巧解决这个问题


/*var$checkbox=$（'.form-control'），
$iconCheck=$（'.check circle'），
$imgSVG=$（'.img'）；
$（$复选框）.on（'change'，function（））{
如果（$（this）.is（':checked'））{
$（this.parent（）.children（'.check circle'）.removeClass（'d-none'）；
//$iconCheck.removeClass（'d-none'）；
$imgSVG.addClass（'d-none'）；
}否则{
$iconCheck.addClass（'d-none'）；
$imgSVG.removeClass（'d-none'）；
}
});*/
img{
显示：块；
宽度：40px；
高度：40px；
}
d-无{
显示：无；
}
输入[type=checkbox]。表单控件：选中+图>img{
显示：无；
}
输入[type=checkbox]。表单控件：选中+图>。选中圆圈{
显示：块；
}

恐怖
选中的！
喜剧片
选中的！
通过在
$（$checkbox）外部定义三个变量
$checkbox
、
$iconCheck
和
$imgSVG
。在（'change'，…）
上，您选择的是每个现有元素，而不是与复选框相关的元素

您应该改为使用
$（'.form control'）。每个（…）
并分别对每个（…）
应用
change
事件。然后可以使用
$（this.parent（）.find（“…”）
找到最近的图像

下面是一个工作示例：


$（'.form-control'）。每个（函数（）{
$（this）.on（'change'，function（））{
让$iconCheck=$（this.parent（）.find（'.check circle'）；
让$imgSVG=$（this.parent（）.find（'.img'）；
如果（$（this）.is（':checked'））{
$iconCheck.removeClass（'d-none'）；
$imgSVG.addClass（'d-none'）；
}否则{
$iconCheck.addClass（'d-none'）；
$imgSVG.removeClass（'d-none'）；
}
});
});
img{
显示：块；
宽度：40px；
高度：40px；
}
d-无{
显示：无；
}

选中的！
恐怖
选中的！
喜剧片
通过在
$（$checkbox）外部定义三个变量
$checkbox
、
$iconCheck
和
$imgSVG
。在（'change'，…）
上，您选择的是每个现有元素，而不是与复选框相关的元素

您应该改为使用
$（'.form control'）。每个（…）
并分别对每个（…）
应用
change
事件。然后可以使用
$（this.parent（）.find（“…”）
找到最近的图像

下面是一个工作示例：


$（'.form-control'）。每个（函数（）{
$（this）.on（'change'，function（））{
让$iconCheck=$（this.parent（）.find（'.check circle'）；
让$imgSVG=$（this.parent（）.find（'.img'）；
如果（$（this）.is（':checked'））{
$iconCheck.removeClass（'d-none'）；
$imgSVG.addClass（'d-none'）；
}否则{
$iconCheck.addClass（'d-none'）；
$imgSVG.removeClass（'d-none'）；
}
});
});
img{
显示：块；
宽度：40px；
高度：40px；
}
d-无{
显示：无；
}

选中的！
恐怖
选中的！
喜剧片