Событие ifChanged библиотеки iCheck запускается только для изменений первого переключателя

Question

Я пытаюсь вызвать событие iCheck ifChanged. Но это срабатывает только тогда, когда я изменил свой выбор на первый выбор (Чтение) и когда я изменил свой выбор с первого выбора (Чтение) на любой другой выбор. Я имею в виду всякий раз, когда первым изменением является предмет изменения, console.log выводит «R» на консоль.

Всякий раз, когда производится изменение между вторым и третьим вариантами (Непрочитано, Все), событие вообще не инициируется.

Я хочу, чтобы оно срабатывало каждый раз, когда я изменяю свой выбор и печатаю значение, связанное с новым выбором.

Что я делаю не так?

<script>
   $( document ).ready(function() {
       $( 'input').iCheck({
           radioClass:'iradio_minimal-blue'
       });
       $( '#read_flag').on('ifChanged', function(event) {
           console.log( $(this).val() );
       });
   });
</script>

<div class="form-group">
    <label>
        <input type="radio" name="read_flag" id="read_flag" value="R">
        Read
    </label>
    <label>
        <input type="radio" name="read_flag" id="read_flag" value="U">
        Unread
    </label>
    <label>
        <input type="radio" name="read_flag" id="read_flag" value="A">
        All
    </label>
</div>

Answer 1

Атрибут

id должен быть уникальным в дом. Поэтому, когда вы используете $('#read_flag'), он всегда возвращает первый соответствующий элемент в DOM. Для решения этой проблемы вы можете обновить id до class для всех переключателей, таких как:

<input type="radio" name="read_flag" class="read_flag" value="A">

, а затем обновить свой код js, например:

$('.read_flag').on('ifChanged', function(event) {
     console.log( $(this).val() );
});

Если вы невозможно обновить код HTML, по какой-то причине вместо него можно использовать селектор input:radio, например:

$('.form-group input:radio').on('ifChanged', function(event) {
     console.log( $(this).val() );
});