[ASP.NET] [GridView] CheckBox全選功能
GridView的CheckBox全選功能
建立GridView後,在GridView中加入CheckBox
<asp:TemplateField HeaderText="*" ItemStyle-BackColor="#f5f5f5" HeaderStyle-BackColor="#E2C2DE" ItemStyle-HorizontalAlign="Center">
<HeaderStyle Wrap="False" />
<ItemStyle Wrap="False" />
<HeaderTemplate>
<asp:CheckBox ID="CheckAllItem" runat="server" />
</HeaderTemplate>
<ItemTemplate>
<asp:CheckBox ID="CheckBox" AutoCallBack="true" runat="server"></asp:CheckBox>
</ItemTemplate>
</asp:TemplateField>
<HeaderTemplate>中的CheckBox為表頭的CheckBox(多選用)
<ItemTemplate>中的CheckBox為明細的CheckBox(單選)
在HeaderTemplate裡的CheckBox加入onclick事件
<HeaderTemplate>
<asp:CheckBox ID="CheckAllItem" runat="server" onclick="javascript: CheckAllItem(this);" />
</HeaderTemplate>
加入JavaScript
<script language="javascript">
function CheckAllItem(Check)
{
elm = document.forms[0]; //取得form表單
for (i = 0; i < elm.length; i++)
{
if (elm[i].type == "checkbox" && elm[i].id != Check.id) //若為checkbox,並且ID與表頭CheckBox不同。表示為明細的CheckBox
{
if (elm.elements[i].checked != Check.checked) //若明細的CheckBox的checked狀態與表頭CheckBox不同
{
elm.elements[i].click(); //明細的CheckBox執行click
}
}
}
}
</script>