在每个复选框上触发事件 [英] Event fire on every checkbox

问题描述

我有几张图像，旁边是复选框，它不会单独显示，但是如果单击标签将复选框激活，则复选框为true或false，现在我认为一切都很好，直到不得不使用所以每复选框响应它的元素，我的代码运行，但它触发的所有事件的每一个形象，当一个复选框被选中.

I have couple of images and next to it are checkbox, that doesn't display on its own, but if click on label fire the checkbox true or false, now I thought everything was fine, until I had to use this so every checkbox responds to its elements, my code runs but it fire all the events for every image when one checkbox is checked.

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

基本上，该代码在单击复选框时显示已添加的消息，而在未选中时显示已删除并消失的消息. 我如何使其能够使用this?这是我的小提琴

Basically, the code when clicked on checkbox show a message of Added and when uncheck, shows a message of removed and disappear. How can I make it work so it uses this? Here is my fiddle

推荐答案

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

This apply to every input with type checkbox, and if you also keep this structure.

$('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);
    }
});

如果您有任何问题，请告诉我.

If you have any question, let me know.

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

Ofcourse you could replace input:checkbox, with the classname kdng.

这篇关于在每个复选框上触发事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！