您现在的位置：程式碼之家 >> 編程語言 > >> .NET 網頁程式設計 >> ASP.NET 基礎 >> ASP.NET 基礎

ASP.NET Repeater 控制項：JavaScript 全選/反選與後端批量處理完整實作

編輯：ASP.NET 基礎

前端：Repeater 結構與全選腳本

<script type="text/javascript">
    // 全選/反選核心函式
    function SelectAll(headerCheckbox, childIdPart, containerId) {
        var inputs = document.getElementsByTagName("INPUT");
        var isChecked = headerCheckbox.checked;

        for (var i = 0; i < inputs.length; i++) {
            var el = inputs[i];
            if (el.type === 'checkbox' && IsMatch(el.id, childIdPart, containerId)) {
                el.checked = isChecked;
            }
        }
    }

    // 正則比對：容器ID_開頭 + 任意字元 + 子核取方塊ID 結尾
    function IsMatch(id, childIdPart, containerId) {
        var pattern = '^' + containerId + '_.*' + childIdPart + '$';
        return new RegExp(pattern).test(id);
    }
</script>

<asp:Repeater ID="Repeater_xx" runat="server">
    <HeaderTemplate>
        <table>
            <tr>
                <th><asp:CheckBox ID="chkAll" runat="server" Text="全選/反選" 
                    onclick='SelectAll(this, "CheckBox_ID", "Repeater_xx")' /></th>
                <th>資料</th>
            </tr>
        </table>
    </HeaderTemplate>
    <ItemTemplate>
        <tr>
            <td>
                <asp:CheckBox ID="CheckBox_ID" runat="server" />
            </td>
            <td>
                <asp:Label ID="Label_ID" runat="server" Text='<%# Eval("Label_ID") %>' />
            </td>
        </tr>
    </ItemTemplate>
    <FooterTemplate>
        </table>
    </FooterTemplate>
</asp:Repeater>

<input type="submit" id="btnBatch" runat="server" value="批次處理" onserverclick="BtnBatch_Click" />

後端：批次處理事件

protected void BtnBatch_Click(object sender, EventArgs e)
{
    foreach (RepeaterItem item in Repeater_xx.Items)
    {
        // 找出該列的核取方塊
        CheckBox cb = item.FindControl("CheckBox_ID") as CheckBox;
        if (cb != null && cb.Checked)
        {
            // 取得該列的資料識別碼
            Label lbl = item.FindControl("Label_ID") as Label;
            if (lbl != null)
            {
                int id = Convert.ToInt32(lbl.Text);
                // 執行業務邏輯：刪除、匯出、狀態變更等
                ProcessItem(id);
            }
        }
    }
    // 重新繫結或導向
    BindRepeater();
}

private void ProcessItem(int id)
{
    // 實際業務操作
    // _service.Delete(id); 等
}

關鍵技術點

技術點	說明
Repeater ClientID 模式	ASP.NET 產生的 ClientID 格式為 `ContainerID_RowIndex_ControlID`（如 `Repeater_xx_0_CheckBox_ID`），正則 `^Repeater_xx_.*CheckBox_ID$` 精準比對。
`FindControl`	在 `RepeaterItem` 容器內尋找控制項，避免全頁搜尋錯誤。
ViewState 與 PostBack	核取狀態自動保留在 ViewState，PostBack 後仍可正確判斷 `cb.Checked`。
效能考量	大量資料建議加分頁，或改用 GridView/ListView 內建選取功能。

進階：jQuery 版全選（更簡潔）

<script>
$(function () {
    $('#Repeater_xx_chkAll').on('change', function () {
        $('#Repeater_xx input[id$="CheckBox_ID"]').prop('checked', this.checked);
    });
});
</script>