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>