Why checkbox properties is inversed from its look in chrome and IE?

I am using Yii2, kartik gridview widget with checkbox column in my gridview.

When I click 'Select All', the column checkboxes $('input.new-module') change event should be triggered. This works well in cross browsers, the change() been triggered.

Problem: In firefox, when I check 'Select All', the checkboxes 'checked' property gives me correct status. While in IE and Chrome, it gives me the status of the opposite which is wrong(at least based on what my eyes saw). In IE and Chrome, when I checked 'Select All', the column checkboxes been checked, but the 'checked' properties show false.

I have googled around and saw a lot comments about these but still cant find a proper solution for my case.

Below is my script to process the checked checkboxes data when change() triggered:

var checkedVal = [];
$('input.new-module').each(function() {
        // get only those not disabled
        if(!$(this).prop('disabled'))
        {      
            console.log($(this).val() + ' checked is ' + $(this).prop('checked'));

            if($(this).prop('checked') === true)
            {
                checkedVal.push($(this).val());
            }
            else // if the checkbox is not checked
            {           
                var indexInArray = $.inArray($(this).val(), checkedVal)

                // if found in array
                if (indexInArray >= 0){
                    checkedVal.splice(indexInArray, 1); // remove ONE unchecked checkbox value in current page from the array using index of array
                }

            }
        }
        else if($(this).prop('disabled'))
        {
            console.log($(this).val() + ' disabled is ' + $(this).prop('disabled'));
            console.log($(this).val() + ' checked is ' + $(this).prop('checked'));
        }

    });