ifChanged event of iCheck library is triggered for only first radio button's changes

I am trying to trigger iCheck's ifChanged event. But it only triggers when I changed my selection to be the first choice (Read) and when I changed my selection from the first choice (Read) to either of the other choices. I mean whenever the first choice is the subject of the change, console.log prints 'R' to console.

Whenever a change is made between second and third choices (Unread, All) the event is not triggered at all.

I want it to be triggered every time I change my choice and print the value associated with the new choice.

What am I doing wrong?

<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>

Solution

id attribute is supposed to be unique in dom. So, when you use $('#read_flag') it will always return the first matched element in the DOM. To resolve this issue you can update id to class for all radio buttons like:

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

and then update your js code like:

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

If you can not update HTML code due to some reason you can use input:radio selector instead like:

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