как исправить флажок и показать, если установлен

Question

Я использую этот код, чтобы отобразить некоторый текст (Checked) при нажатии на 1 или более флажков.Я использую on, потому что флажки создаются динамически.

Кажется, что только IE Edge не может справиться с этим.Я должен дважды щелкнуть по флажку, чтобы показать текст Checked.Во всех других браузерах это работает сразу.На самом деле не знаю, что не так с кодом

<input type="checkbox" class="rafcheckbox" value="1" />
<input type="checkbox" class="rafcheckbox" value="2" />
<input type="checkbox" class="rafcheckbox" value="3" />

<div class="cb-buttons" style="display:none">Checked</div>

<script>

$(document).on('click','.rafcheckbox',function() {  
  var $checkboxes = $('.rafcheckbox').change(function() {

    var anyChecked = $checkboxes.filter(':checked').length != 0;
    $(".cb-buttons").toggle(anyChecked);
  });
});

</script>

Fiddle: https://jsfiddle.net/g5tp4kjm/

Answer 1

Давайте попробуем по-другому.

$(document).on('click','.rafcheckbox',function() {

    if($('.rafcheckbox').is(':checked'))
    {
        //do whatever you want
    }  
    else  
    {
        //do the opposite
    }
});

Answer 2

• Так как у вас уже есть делегат для элементов, просто измените его на обработчик события изменения.
• Внутри этой логики, переключите класс скрытия, но заставьте его иметь класс скрытия, если нетэлементы проверены.

$(document).on('change','.rafcheckbox',function() {
  $('.cb-buttons').toggleClass('hide', $('.rafcheckbox:checked').length < 1);
});

.hide { display: none; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" class="rafcheckbox" value="1" />
<input type="checkbox" class="rafcheckbox" value="2" />
<input type="checkbox" class="rafcheckbox" value="3" />

<div class="cb-buttons hide">Checked</div>