jQuery элементы в цикле

Question

У меня есть цикл в стиле Java, который на домашней странице содержит список с текстом и флажками. Поэтому у меня есть набор флажков. Мне нужно показать сообщение, когда я нажимаю на ЛЮБОЙ флажок, но в моем варианте сообщения отображаются только тогда, когда я нажимаю первый флажок.

Мой флажок в цикле

<c:forEach items="${sessionScope.flights}" var="flight"> 
    <input type="checkbox" class="deleteBox"/> 
</c:forEach> 

Мой сценарий

$(".deleteBox").change(function(){ 
     $("#deletePanel").each(function(index, element){ 
      if($(".deleteBox").prop("checked")){ 
       console.log("true"); 
       $("#deletePanel").css("display","inline"); 
      }else{ 
       $("#deletePanel").css("display","none"); 
       console.log("false"); 
      } 
     }); 
    }); 

ДИВ Сообщение

<div id="deletePanel" style="display: none">Delete selected</div> 

Answer 1

Попробуйте это:

$(".deleteBox").change(function(){ 
    // use $(this) to check state of current changed checkbox 
    if($(this).prop("checked")){ 
     console.log("true"); 
     $("#deletePanel").css("display","inline"); 
    }else{ 
     $("#deletePanel").css("display","none"); 
     console.log("false"); 
    } 
}); 

Как только один #deletePanel, вам не нужно каждую функцию - просто проверить, если удаление флажок на изменения и показать сообщение, если оно

Update

в соответствии с комментарием я хотел бы сделать это следующим образом:

$(".deleteBox").change(function(){ 
    if($(".deleteBox:checked").length){ 
    console.log("true"); 
    $("#deletePanel").css("display","inline"); 
    }else{ 
    $("#deletePanel").css("display","none"); 
    console.log("false"); 
    } 
}); 

Answer 2

Вы можете использовать .toggle():

$(".deleteBox").change(function(){ 
    $("#deletePanel").toggle(this.checked); 
});