利用JavaScript实现GridView中表头CheckBox的全选功能

关键代码如下：

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

Code Snippet

1. <asp:GridView runat="server">
2. <Columns>
3. <asp:TemplateField>
4. <HeaderTemplate>
5. <asp:CheckBox runat="server" />
6. </HeaderTemplate>
7. <ItemTemplate>
8. <asp:CheckBox runat="server" />
9. </ItemTemplate>
10. </asp:TemplateField>
11. </Columns>
12. </asp:GridView>

2.添加JavaScript文件

Code Snippet

1. <script type="text/javascript">
2. function ChangeCheckBoxState(id, checkState) {
3. var cb = document.getElementById(id);
4. if (cb != null)
5. cb.checked = checkState;
6. }
7. function ChangeAllCheckBoxStates(checkState) {
8. //更新CheckBoxIDs数组中所有的CheckBox的checkState
9. if (CheckBoxIDs != null) {
10. for (var i = 0; i < CheckBoxIDs.length; i++)
11. ChangeCheckBoxState(CheckBoxIDs[i], checkState);
12. }
13. }
14. function ChangeHeaderAsNeeded() {
15. //?动更新Header的CheckBox
16. if (CheckBoxIDs != null) {
17. // 检查是否所有CheckBox?中
18. for (var i = 1; i < CheckBoxIDs.length; i++) {
19. var cb = document.getElementById(CheckBoxIDs[i]);
20. if (!cb.checked) {
21. // 有任何一个CheckBox未?中?则Header的CheckBox不?中
22. ChangeCheckBoxState(CheckBoxIDs[0], false);
23. return;
24. }
25. }
26. //如果代码??到???则所有CheckBox?中?则Header的CheckBox也?中
27. ChangeCheckBoxState(CheckBoxIDs[0], true);
28. }
29. }
30. </script>

3.为GridView添加 DataBound事件，实现客户端Header的onclick的方法

Code Snippet

1. protected void GridView1_DataBound(object sender, EventArgs e)
2. {
3. //每次数据绑定到GridView????建立CheckBoxIDs数组
4. //?得header CheckBox
5. CheckBox cbHeader = GridView1.HeaderRow.FindControl("HeaderLevelCheckBox") as CheckBox;
6. //当点击header CheckBox 全?/取消 时???客户端ChangeCheckBoxState函数
7. cbHeader.Attributes.Add("onclick", "ChangeAllCheckBoxStates(this.checked);");
8. //添加Header CheckBox's ID 到客户端 CheckBoxIDs 数组
9. List<string> ArrayValues = new List<string>();
10. ArrayValues.Add(string.Concat("'", cbHeader.ClientID, "'"));
11. foreach (GridViewRow gvr in GridView1.Rows)
12. {
13. //?取ItemTemplate中CheckBox
14. CheckBox cb = gvr.FindControl("RowLevelCheckBox") as CheckBox;
15. //如果Item CheckBox有一?为?中?则Header CheckBox未?中
16. cb.Attributes.Add("onclick", "ChangeHeaderAsNeeded();");
17. //添加Item CheckBox's ID 到客户端 CheckBoxIDs 数组
18. ArrayValues.Add(string.Concat("'", cb.ClientID, "'"));
19. }
20. //?出ArrayValues数组到Literal 控件 (<p><asp:Literal runat="server"></asp:Literal></p>)
21. CheckBoxIDsArray.Text = "<script type=\"text/javascript\">" + string.Concat("var CheckBoxIDs = new Array(", string.Join(",", ArrayValues.ToArray()), ");") + "</script>";
22. }

4.生成测试数据

Code Snippet

1. protected void Page_Load(object sender, EventArgs e)
2. {
3. if (!IsPostBack)
4. {
5. DirectoryInfo dirInfo = new DirectoryInfo(Request.PhysicalApplicationPath);
6. GridView1.DataSource = dirInfo.GetFiles();
7. GridView1.DataBind();
8. }
9. }

注：翻译自《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

2.Working with Client-Side Script 获取更多关于 client-side HTML attributes and events using server-side ASP.NET code.