.prop («проверено») выбирает только первый элемент

Question

$(function() { 
    $('.checkbox').change(function() { 
    if ($('.checkbox').prop("checked")) { 
     alert('checked'); 
     if ($('#print').length == 0) { 
      $('#post').append('<input type="button" id="print" value="Print">'); 
     } 
    } else { 
     alert('unchecked'); 
     if ($('#print').length != 0) { 
      $('#print').remove(); 
     } 
    } 
    }); 
}); 

В примере выше, когда я проверить первый флажок она запускает alert('checked');, когда я снимите, он запускает alert('unchecked');. Работает по назначению.

Однако, с любым другим элементом, кроме первого (второго, третьего ... флажков и т. Д.), Если я устанавливаю флажок, он всегда возвращает False от $('.checkbox').prop("checked").

Как я могу сделать это, чтобы контролировать все флажки?

Answer 1

$('.checkbox') не даст вам статус флажка, потому что селекторы классов не возвращают ни одного элемента.

Использование: $('.checkbox').eq(0).prop("checked") для получения первого или использовать .each() для доступа к результирующему списку в цикле.

$('.checkbox').each(function() { 
    if($(this).prop("checked")) { 
     alert("checked!"); 
    } 
}) 

Answer 2

Это позволит выбрать все все элементы с классом CheckBox на странице:

if ($('.checkbox').prop("checked")) { 

Однако это выбрать элемент, из которого обстреляли событие:

if ($(this).prop("checked")) {