可检查表格标题复选框无效

Question

我在我的MVC4应用程序中使用带有ICheck框的jQuery数据表。

我尝试点击标题复选框点击事件，但它无效，请查看我的代码。

下方。

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>

脚本

    $(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];
                });
            }
        });
    });

我需要选中或取消选中标题复选框中的所有行复选框，选中更改事件。

更新

我改变了我的标题复选框html，如

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

和我的剧本

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

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

现在，已检查状态显示在警报中。但我无法检查tbody tr复选框。

请帮忙。

Answer 1

disable_functions

Answer 2

试试这个

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

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