如何在C#.Net中通过表头复选框选中Repeater控件对应列所有复选框

服务器端修正方案（针对你原有的事件实现） #

你之前的checkView_CheckedChanged事件未生效，核心问题是未给表头复选框设置AutoPostBack="true"，导致勾选时不会触发回发。按以下步骤修改：

1. 更新前台表头复选框代码 #

给checkView添加AutoPostBack属性，其他列（Add/Edit/Delete）同理：

<th style="width: 6%">View  <asp:CheckBox id="checkView" runat="server" OnCheckedChanged="checkView_CheckedChanged" AutoPostBack="true"></asp:CheckBox></th>
<th style="width: 6%">Add    <asp:CheckBox id="checkAdd" runat="server" OnCheckedChanged="checkAdd_CheckedChanged" AutoPostBack="true"></asp:CheckBox></th>
<th style="width: 6%">Edit    <asp:CheckBox id="CheckEdit" runat="server" OnCheckedChanged="checkEdit_CheckedChanged" AutoPostBack="true"></asp:CheckBox></th>
<th style="width: 6%">Delete    <asp:CheckBox id="CheckDelete" runat="server" OnCheckedChanged="checkDelete_CheckedChanged" AutoPostBack="true"></asp:CheckBox></th>

2. 后台事件处理代码 #

在代码文件中添加对应事件，遍历Repeater的所有项，设置对应列复选框的选中状态：

protected void checkView_CheckedChanged(object sender, EventArgs e)
{
    CheckBox headerCheck = (CheckBox)sender;
    SetColumnCheckState("chkView", headerCheck.Checked);
}

protected void checkAdd_CheckedChanged(object sender, EventArgs e)
{
    CheckBox headerCheck = (CheckBox)sender;
    SetColumnCheckState("chkAdd", headerCheck.Checked);
}

protected void checkEdit_CheckedChanged(object sender, EventArgs e)
{
    CheckBox headerCheck = (CheckBox)sender;
    SetColumnCheckState("chkEdit", headerCheck.Checked);
}

protected void checkDelete_CheckedChanged(object sender, EventArgs e)
{
    CheckBox headerCheck = (CheckBox)sender;
    SetColumnCheckState("chkDelete", headerCheck.Checked);
}

// 复用方法，统一处理列复选框状态
private void SetColumnCheckState(string controlId, bool isChecked)
{
    foreach (RepeaterItem item in rptMenu.Items)
    {
        if (item.ItemType == ListItemType.Item || item.ItemType == ListItemType.AlternatingItem)
        {
            CheckBox chkBox = (CheckBox)item.FindControl(controlId);
            if (chkBox != null) chkBox.Checked = isChecked;
        }
    }
}

前端JavaScript方案（推荐，无页面回发） #

服务器端方案需要页面回发，体验较差，更推荐用前端JS实现，响应更快：

1. 给复选框添加类标识 #

修改前台代码，给表头复选框和列复选框添加对应类名，用data-target-class关联：

<!-- 表头复选框 -->
<th style="width: 6%">View  <input type="checkbox" class="header-check" data-target-class="col-view" /></th>
<th style="width: 6%">Add    <input type="checkbox" class="header-check" data-target-class="col-add" /></th>
<th style="width: 6%">Edit    <input type="checkbox" class="header-check" data-target-class="col-edit" /></th>
<th style="width: 6%">Delete    <input type="checkbox" class="header-check" data-target-class="col-delete" /></th>

<!-- ItemTemplate中的列复选框 -->
<td><input type="checkbox" class="col-view" runat="server" /></td>
<td><input type="checkbox" class="col-add" runat="server" /></td>
<td><input type="checkbox" class="col-edit" runat="server" /></td>
<td><input type="checkbox" class="col-delete" runat="server" /></td>

2. 添加JavaScript代码 #

在页面底部添加原生JS代码（无需依赖jQuery）：

document.addEventListener('DOMContentLoaded', function() {
    // 监听所有表头复选框的变化事件
    document.querySelectorAll('.header-check').forEach(headerCheck => {
        headerCheck.addEventListener('change', function() {
            const isChecked = this.checked;
            const targetClass = this.dataset.targetClass;
            // 找到对应列的所有复选框，设置选中状态
            document.querySelectorAll(`.${targetClass}`).forEach(colCheck => {
                colCheck.checked = isChecked;
            });
        });
    });
});

这个方案无需页面回发，用户操作后立即生效，体验更流畅。

内容的提问来源于stack exchange，提问作者Aman