Jquery table列表多选实现

 

$("#checkAll").bind("click", function () {
        debugger;
        if (this.checked) {
            $("[name = checkItem]:checkbox").attr("checked", true);
        }
        else {
            $("[name = checkItem]:checkbox").attr("checked", false);
        }
    });

 

<table class="table table-striped table-hover table-condensed">
        <thead>
            <tr>
                <th><input id="checkAll" type="checkbox" /></th>
                <th>订单编号</th>
                <th>客户代码</th>
                <th>客户名称</th>
                <th>下单日期</th>
                <th>运单号</th>
                <th>电商平台名称</th>
                <th>批次号</th>
                <th>编辑</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var item in Model)
            {
                <tr>
                    <td><input id="@item.Id" name="checkItem" type="checkbox" /></td>
                    <td>@Ajax.ActionLink(item.OrderNo, "Details", new { item.Id }, new AjaxOptions { UpdateTargetId = "Main" })</td>
                    <td>@Html.DisplayFor(a => item.CustomCode)</td>
                    <td>@Html.DisplayFor(a => item.CustomName)</td>
                    <td>@Html.DisplayFor(a => item.CreateDate)</td>
                    <td>@Html.DisplayFor(a => item.WaybillNo)</td>
                    <td>@Html.DisplayFor(a => item.PlatName)</td>
                    <td>@Html.DisplayFor(a => item.BatchNo)</td>
                    <td>
                        @Ajax.ActionLink("编辑", "Edit", null, new { id = item.Id }, new AjaxOptions { UpdateTargetId = "Main" }, new { @class = "" })
                        <span>&nbsp;</span>
                        @Ajax.ActionLink("删除", "Delete", null, new { id = item.Id }, new AjaxOptions { UpdateTargetId = "Main", HttpMethod = "Delete", Confirm = "您确定要删除该记录吗？该操作不可恢复！" }, new { @class = "" })
                    </td>
                </tr>
            }
        </tbody>
    </table>