c# - 可检查的表头复选框不起作用

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

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

    var checkStatus = this.checked;

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