利用JavaScript實現GridView中表頭CheckBox的全選功能

關鍵代碼如下：

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

Code Snippet

1. <asp:GridView ID="GridView1" runat="server">
2.     <Columns>
3.         <asp:TemplateField>
4.             <HeaderTemplate>
5.                 <asp:CheckBox ID="HeaderLevelCheckBox" runat="server" />
6.             </HeaderTemplate>
7.             <ItemTemplate>
8.                 <asp:CheckBox ID="RowLevelCheckBox" 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.     }
8.     function ChangeAllCheckBoxStates(checkState) {
9.         //更新CheckBoxIDs數組中所有的CheckBox的checkState
10.         if (CheckBoxIDs != null) {
11.             for (var i = 0; i < CheckBoxIDs.length; i++)
12.                 ChangeCheckBoxState(CheckBoxIDs[i], checkState);
13.         }
14.     }
16.     function ChangeHeaderAsNeeded() {
17.         //?動更新Header的CheckBox
18.         if (CheckBoxIDs != null) {
19.             // 檢查是否所有CheckBox?中
20.             for (var i = 1; i < CheckBoxIDs.length; i++) {
21.                 var cb = document.getElementById(CheckBoxIDs[i]);
22.                 if (!cb.checked) {
23.                     // 有任何一個CheckBox未?中?則Header的CheckBox不?中
24.                     ChangeCheckBoxState(CheckBoxIDs[0], false);
25.                     return;
26.                 }
27.             }
28.             //如果代碼??到???則所有CheckBox?中?則Header的CheckBox也?中
29.             ChangeCheckBoxState(CheckBoxIDs[0], true);
30.         }
31.     }
32. </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, "'"));
12.     foreach (GridViewRow gvr in GridView1.Rows)
13.     {
14.         //?取ItemTemplate中CheckBox
15.         CheckBox cb = gvr.FindControl("RowLevelCheckBox") as CheckBox;
16.         //如果Item CheckBox有一?為?中?則Header CheckBox未?中
17.         cb.Attributes.Add("onclick", "ChangeHeaderAsNeeded();");
18.         //添加Item CheckBox's ID 到用戶端 CheckBoxIDs 數組
19.         ArrayValues.Add(string.Concat("'", cb.ClientID, "'"));
20.     }
21.     //?出ArrayValues數組到Literal 控制項 (<p><asp:Literal ID="CheckBoxIDsArray" runat="server"></asp:Literal></p>)
22.     CheckBoxIDsArray.Text = "<script type=\"text/javascript\">" + string.Concat("var CheckBoxIDs = new Array(", string.Join(",", ArrayValues.ToArray()), ");") + "</script>";
23. }

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.