Checkable table header checkbox is not working

Question

I am using jQuery datatable with ICheck box in my MVC4 application.

I try to fired the event of header check box click but it's not working please see my code.

below.

Html

<table id="tblItems" class="table table-bordered table-checkable">
            <thead>
                <tr>
                    <th class="checkbox-column">
                        <input type="checkbox" class="icheck-input" />
                    </th>
                    <th>Item No</th>
                    <th>Name</th>
                </tr>
            </thead>
            <tbody>
                <tr>

                </tr>
            </tbody>
        </table>

Script

    $(document).ready(function () {

    var elementName = "#tblItems";

    $(elementName).dataTable({
        bProcessing: false,
        bLengthChange: false,
        bInfo: false,
        bPaginate: false,
        sAjaxSource: '@Url.Action("GetNeedsToDispatchOrders", "Dispatch")',
            aoColumns: [
               {
                   mRender: function (o) { return '<td class="checkbox-column"><input type="checkbox" class="icheck-input" /></td>'; }
               },
               { sTitle: "Item No", bSortable: false, },
               { sTitle: "Name", bFilterable: true, bSortable: false, },
            ],
            "fnRowCallback": function (nRow, aData, iDisplayIndex) {
                var row = $(nRow).attr("id", $('td:eq(0)', nRow).html());
                $('td', nRow).on('click', function (e) {
                    if ($(this).hasClass('action'))
                        e.stopPropagation();
                });
                //Edit
                row.find('.clsEdit').click(function () {

                    var node = $(this).closest('tr');
                    var table = $(elementName).DataTable()
                    var column_data = table.row(node).data()[0];
                });
                //Delete
                row.find('.clsDelete').click(function () {

                    var node = $(this).closest('tr');
                    var table = $(elementName).DataTable();
                    var column_data = table.row(node).data()[0];
                });
                //Row click for details popup
                row.click(function () {
                    var idx = $(this).closest('tr');
                    var table = $(elementName).DataTable();
                    var column_data = table.row(idx).data()[0];
                });
            }
        });
    });

I need to check or uncheck all row checkbox in the header checkbox checked change event.

UPDATE

I change my header checkbox html like

 <input type="checkbox" id="thChk" class="icheck-input" />

and my script

    $('#tblItems').on('change', '#thChk', function (event) {
        alert(this.checked);

        $('#tblItems tbody tr input[type=checkbox]').each(function () {
            $(this).prop('checked', this.checked);
        });
    });

Now the checked status is show in a alert. But i can't checked the tbody tr checkbox.

Answer 1

$('#tblItems').on('change', '#thChk', function () {
    alert(this.checked);

    var checkStatus = this.checked;

    $('#tblItems tbody tr').find('input:checkbox').each(function () {
        $(this).prop('checked', checkStatus);
    });
});

Answer 2

Try with this

$('#tblItems').on('change', '#thChk', function () {
        alert(this.checked);

        $('#tblItems tbody tr').find('input:checkbox').each(function () {
            $(this).prop('checked', this.checked);
        });
});