【转载】利用JavaScript实现GridView中表头CheckBox的全选功能

原文地址：/article/5965044.html

关键代码如下：

1.在GridView中Header中添加Checkbox，代码如下

Code Snippet

<asp:GridView ID="GridView1" runat="server">
<Columns>
<asp:TemplateField>
<HeaderTemplate>
<asp:CheckBox ID="HeaderLevelCheckBox" runat="server" />
</HeaderTemplate>
<ItemTemplate>
<asp:CheckBox ID="RowLevelCheckBox" runat="server" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>

2.添加JavaScript文件

Code Snippet

<script type="text/javascript">
function ChangeCheckBoxState(id, checkState) {
var cb = document.getElementById(id);
if (cb != null)
cb.checked = checkState;
}

function ChangeAllCheckBoxStates(checkState) {
//更新CheckBoxIDs数组中所有的CheckBox的checkState
if (CheckBoxIDs != null) {
for (var i = 0; i < CheckBoxIDs.length; i++)
ChangeCheckBoxState(CheckBoxIDs[i], checkState);
}
}

function ChangeHeaderAsNeeded() {
//?动更新Header的CheckBox
if (CheckBoxIDs != null) {
// 检查是否所有CheckBox?中
for (var i = 1; i < CheckBoxIDs.length; i++) {
var cb = document.getElementById(CheckBoxIDs[i]);
if (!cb.checked) {
// 有任何一个CheckBox未?中?则Header的CheckBox不?中
ChangeCheckBoxState(CheckBoxIDs[0], false);
return;
}
}
//如果代码??到???则所有CheckBox?中?则Header的CheckBox也?中
ChangeCheckBoxState(CheckBoxIDs[0], true);
}
}
</script>

3.为GridView添加

DataBound事件，实现客户端Header的
onclick
的方法

Code Snippet

protected void GridView1_DataBound(object sender, EventArgs e)
{
//每次数据绑定到GridView????建立CheckBoxIDs数组
//?得header CheckBox
CheckBox cbHeader = GridView1.HeaderRow.FindControl("HeaderLevelCheckBox") as CheckBox;
//当点击header CheckBox 全?/取消 时???客户端ChangeCheckBoxState函数
cbHeader.Attributes.Add("onclick", "ChangeAllCheckBoxStates(this.checked);");
//添加Header CheckBox's ID 到客户端 CheckBoxIDs 数组
List<string> ArrayValues = new List<string>();
ArrayValues.Add(string.Concat("'", cbHeader.ClientID, "'"));

foreach (GridViewRow gvr in GridView1.Rows)
{
//?取ItemTemplate中CheckBox
CheckBox cb = gvr.FindControl("RowLevelCheckBox") as CheckBox;
//如果Item CheckBox有一?为?中?则Header CheckBox未?中
cb.Attributes.Add("onclick", "ChangeHeaderAsNeeded();");
//添加Item CheckBox's ID 到客户端 CheckBoxIDs 数组
ArrayValues.Add(string.Concat("'", cb.ClientID, "'"));
}
//?出ArrayValues数组到Literal 控件 (<p><asp:Literal ID="CheckBoxIDsArray" runat="server"></asp:Literal></p>)
CheckBoxIDsArray.Text = "<script type=\"text/javascript\">" + string.Concat("var CheckBoxIDs = new Array(", string.Join(",", ArrayValues.ToArray()), ");") + "</script>";
}

4.生成测试数据

Code Snippet

protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
DirectoryInfo dirInfo = new DirectoryInfo(Request.PhysicalApplicationPath);
GridView1.DataSource = dirInfo.GetFiles();
GridView1.DataBind();
}
}

注：翻译自《Checking All CheckBoxes in a GridView Using Client-Side Script and a Check All CheckBox》原文代码下载Download the code used in this article

参考：1.Checking All CheckBoxes in a GridView