javascript - 每个复选框都会触发事件

Question

我有几个图像，旁边是复选框，它不会单独显示，但是如果单击标签触发复选框 true 或 false，现在我认为一切都很好，直到我不得不使用 this 因此每个复选框都会响应其元素，我的代码会运行，但当选中一个复选框时，它会触发每个图像的所有事件。

 $(".suggestions").click(function() {
   if ($(".checkbox").prop('checked') === true) {
     $("h2").fadeIn("fast").fadeOut(5000)
   }
   if ($(".checkbox").prop('checked') === false) {
     $("h2").fadeIn("fast").fadeOut(5000)
   }
 })

基本上，当单击复选框时，代码会显示一条“已添加”消息，当取消选中时，会显示一条“已删除”消息并消失。 我怎样才能让它工作并使用this？这是我的fiddle

Answer 1

这适用于带有类型复选框的每个输入，并且如果您也保留此结构。

$('input:checkbox').on('change', function() {
    if ($(this).prop('checked') === true) {
        $(this).parent('div').siblings('.flex-column').children('h2.addMsg').fadeIn("fast").fadeOut(5000);
    } else {
        $(this).parent('div').siblings('.flex-column').children('h2.removeMsg').fadeIn("fast").fadeOut(5000);
    }
});

如果您有任何疑问，请告诉我。

编辑:

当然，您可以将 input:checkbox 替换为类名 kdng。