GridView 欄位 CheckBox 全選及取消全選

如何在GridView做到指定欄位的CheckBox的「全選/取消全選」的功能，筆者有在網路上搜尋到一篇不錯的文章如下，文章中有詳細介紹如何實作此功能

GridView CheckBox Selection With a Twist
http://www.codeproject.com/cs/miscctrl/GridViewCheckBox.asp

不過它的範例在GridView具有二個以上的「全選/取消全選」欄位時會發生問題，勾選了其中一個欄位時，會造成GridView中所有的欄位都被勾選，如下圖所示。



針對以上的問題，以它的程式碼做部分修正。
首先在頁面上放置一個GridView控制項，要做「全選/取消全選」功能的欄位要以TemplateField來實作。
在TemplateField的HeaderTemplate中加入一個CheckBox做為「全選/取消全選」的操作，CheckBox的onclick執行JavaScript Check()函式。

1 <HeaderTemplate>
2     <input type="checkbox" id="chkAll" name="chkAll" onclick="Check(this,'chkSelect1')" />CategoryName
3 </HeaderTemplate>

在ItemTemplate加入CheckBox及Label，其中CheckBox的ID設為chkSelect1，即為HeaderTemplate的Check()函式的第二個引數。

1 <ItemTemplate>
2     <asp:CheckBox ID="chkSelect1" runat="server" />
3     <asp:Label ID="Label1" runat="server" Text='<%# Bind("CategoryName") %>'></asp:Label>
4 </ItemTemplate>

因為要做二個欄位的「全選/取消全選」，故將TemplateField複製一份，並將第二個TemplateField的 ItemTemplate中CheckBox的ID設為chkSelect2，其HeaderTemplate的Check()函式第二個引數即為 chkSelect2。

GridView完整的aspx程式碼如下

 1 <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="CategoryID"
 2     DataSourceID="SqlDataSource2" EmptyDataText="沒有資料錄可顯示。">
 3     <Columns>
 4         <asp:TemplateField HeaderText="CategoryID" SortExpression="CategoryName">
 5             <HeaderTemplate>
 6                 <input type="checkbox" id="chkAll" name="chkAll" onclick="Check(this,'chkSelect')" />CategoryName
 7             </HeaderTemplate>
 8             <ItemTemplate>
 9                 <asp:CheckBox ID="chkSelect" runat="server" />
10                 <asp:Label ID="Label1" runat="server" Text='<%# Bind("CategoryName") %>'></asp:Label>
11             </ItemTemplate>
12         </asp:TemplateField>
13         <asp:TemplateField HeaderText="CategoryID" SortExpression="CategoryName">
14             <HeaderTemplate>
15                 <input type="checkbox" id="chkAll" name="chkAll" onclick="Check(this,'chkSelect2')" />CategoryName
16             </HeaderTemplate>
17             <ItemTemplate>
18                 <asp:CheckBox ID="chkSelect2" runat="server" />
19                 <asp:Label ID="Label1" runat="server" Text='<%# Bind("CategoryName") %>'></asp:Label>
20             </ItemTemplate>
21         </asp:TemplateField>
22         <asp:BoundField DataField="Description" HeaderText="Description" SortExpression="Description" />
23     </Columns>
24 </asp:GridView>
25 

在頁面加入下列的JavaScript程式碼，其中Check()即為GridView表頭CheckBox的呼叫的函式。

 1 <script type="text/javascript">
 2 function Check(parentChk,ChildId)
 3 {
 4     var oElements = document.getElementsByTagName("INPUT");
 5     var bIsChecked = parentChk.checked;
 6 
 7     for(i=0; i<oElements.length;i++)
 8     {
 9         if( IsCheckBox(oElements[i]) && 
10             IsMatch(oElements[i].id, ChildId))
11         {
12             oElements[i].checked = bIsChecked;
13         }        
14     }   
15 }
16 
17 function IsMatch(id, ChildId)
18 {
19     var sPattern ='^GridView1.*'+ChildId+'$';
20     var oRegExp = new RegExp(sPattern);
21     if(oRegExp.exec(id)) 
22         return true;
23     else 
24         return false;
25 }
26 
27 function IsCheckBox(chk)
28 {
29     if(chk.type == 'checkbox') return true;
30     else return false;
31 }
32 </script>
33 

其中Check()函式中，主要是去尋找所有Tag為Input的Element，再去過濾它的id名稱。 因為GridView中的子控制項命名有一定的規則，檢視HTML程式碼可以發現GridView同一個欄位CheckBox命名為以 GridView的ID開頭，而以CheckBox的ID為結尾；所以IsMatch()函式中，就是利用這個規則去判斷是否為同欄位的 CheckBox。



執行的結果如下