ASP.NET GridView 配合 CheckBox 實現全選/取消全選功能

GridView 內建選取功能有限，實務上常需在表頭放置「全選」核取方塊，一鍵選取/取消所有資料列的 CheckBox。本文提供純前端 JavaScript 實作，無需 PostBack，體驗流暢。

1. GridView 模板欄位定義

<asp:TemplateField HeaderText="全選">
    <HeaderTemplate>
        <input type="checkbox" id="chkAll" name="chkAll" onclick="ToggleAllCheckBoxes(this)" /> 全選
    </HeaderTemplate>
    <ItemTemplate>
        <asp:CheckBox ID="chkRow" runat="server" />
    </ItemTemplate>
    <ItemStyle HorizontalAlign="Center" Width="50px" />
</asp:TemplateField>

關鍵點

• 表頭使用原生 <input type="checkbox">（非 Server Control），避免命名容器產生複雜 ClientID
• onclick="ToggleAllCheckBoxes(this)" 傳遞自身參考，JS 直接取得 checked 狀態
• 資料列使用 asp:CheckBox，渲染為 <input type="checkbox">，JS 可統一選取

2. JavaScript 全選邏輯

<script type="text/javascript">
function ToggleAllCheckBoxes(chkAll) {
    // 取得頁面所有 input 元素
    var inputs = document.getElementsByTagName("input");
    for (var i = 0; i < inputs.length; i++) {
        if (inputs[i].type === "checkbox") {
            inputs[i].checked = chkAll.checked;
        }
    }
}
</script>

3. 進階：限制範圍只影響 GridView 內核取方塊

若頁面有其他 CheckBox 不想被影響，可透過容器限定：

function ToggleAllCheckBoxes(chkAll) {
    // 找到 GridView 容器（假設 GridView ClientID 為 gvData）
    var grid = document.getElementById("<%= gvData.ClientID %>");
    if (!grid) return;
    
    var checkboxes = grid.getElementsByTagName("input");
    for (var i = 0; i < checkboxes.length; i++) {
        if (checkboxes[i].type === "checkbox") {
            checkboxes[i].checked = chkAll.checked;
        }
    }
}

4. 後端取得勾選資料列

List<string> selectedIds = new List<string>();
foreach (GridViewRow row in gvData.Rows)
{
    CheckBox chk = (CheckBox)row.FindControl("chkRow");
    if (chk != null && chk.Checked)
    {
        // 假設 DataKeyNames="Id"
        string id = gvData.DataKeys[row.RowIndex].Value.ToString();
        selectedIds.Add(id);
    }
}
// 執行批次刪除、匯出等操作
BatchDelete(selectedIds);

5. 進階：保留勾選狀態跨分頁

GridView 分頁時勾選狀態會遺失（因重新綁定）。解決方案：

1. ViewState/Session 記錄已勾選的 Key 集合
2. RowDataBound 事件中根據集合還原 chkRow.Checked
3. 全選/取消全選時同步更新集合

完整頁面範例結構

<%@ Page Language="C#" %>
<script runat="server">
    protected void Page_Load(object sender, EventArgs e) {
        if (!IsPostBack) BindGrid();
    }
    void BindGrid() { /* 綁定資料 */ }
    protected void btnDelete_Click(object sender, EventArgs e) { /* 批次刪除 */ }
</script>
<html><head>
    <script> function ToggleAllCheckBoxes(chkAll) { ... } </script>
</head><body>
    <form id="form1" runat="server">
        <asp:GridView ID="gvData" runat="server" DataKeyNames="Id" AutoGenerateColumns="false">
            <Columns>
                <!-- 全選欄 -->
                <asp:TemplateField HeaderText="全選"> ... </asp:TemplateField>
                <asp:BoundField DataField="Name" HeaderText="名稱" />
                <asp:BoundField DataField="Email" HeaderText="信箱" />
            </Columns>
        </asp:GridView>
        <asp:Button ID="btnDelete" runat="server" Text="批次刪除" OnClick="btnDelete_Click" />
    </form>
</body></html>

此方案零 PostBack、相容所有瀏覽器、易於整合既有 GridView，是 WebForms 專案實現批次操作的經典最佳實務。