使用jquery全選/清除CheckBox

過去要在GridView的Header加入CheckBox的全選/清除功能，不外乎有二種做法，第一種是在Server-side做，也就是在.cs檔裡撰寫相關事件程式，第二種則是利用javascript撰寫Client端的程式，先取待Table的id (GridView的ClientID)，再利用for-loop逐筆選取或清除。今天介紹一個方法(Client端做法)可以讓程式更簡潔
首先來看MasterPage(因為筆者的程式有引用MasterPage)的程式片段
<script type="text/javascript" src="../js/jquery.js">
<script type="text/javascript">
function SelectAllCheckboxes(chk) {
　　<asp:literal id="litCheckAll" runat="server"/>
}

上方程式片段有二個重點

1. 需嵌入jquery
2. 要利用Literal控制項(因為Literal在產生Html碼時不會加入Html Tag)

接下來我們來看.aspx檔的程式片段
<HeaderTemplate>
　　全選/清除
　　<br />
　　<asp:CheckBox ID="chkAll"
　　　　onclick="javascript:SelectAllCheckboxes(this);" runat="server" />
</HeaderTemplate>

上方程式主要目的是要為GridView Header裡的全選/清除CheckBox加入onclick的事件

最後來看.cs檔的程式片段
if (!IsPostBack) {
//動態產生全選/清除的javascript function
//在MasterPage中已加入jquery的js檔
　　((Literal)Master.FindControl("litCheckAll")).Text = "$('#" + gvPlanList.ClientID + " >tbody >tr >td >input:checkbox').attr('checked', chk.checked);";
}

參考來源