Giới thiệu
Bài viết này sẽ hướng dẫn làm thế nào để lựa chọn và bỏ chọn tất cả các Checkbox từ tất cả các cell của điều khiển GridView sử dụng JavaScript đơn giản.
Javascript
<script type="text/javascript" language="javascript">
function SelectAll(chkbox) {
var chk = document.getElementById(chkbox);
var grid = document.getElementById("<%= gvParentGrid.ClientID %>");
var cell;
if (chk.checked == true) {
if (grid.rows.length > 0) {
for (i = 1; i < grid.rows.length; i++) {
for (var k = 0; k < grid.rows[i].cells.length; k++)
{
cell = grid.rows[i].cells[k];
for (j = 0; j < cell.childNodes.length; j++) {
if (cell.childNodes[j].type == "checkbox") {
cell.childNodes[j].checked = true;
}
}
}
}
}
}
else {
if (grid.rows.length > 0) {
for (i = 1; i < grid.rows.length; i++) {
for (var k = 0; k < grid.rows[i].cells.length; k++)
{
cell = grid.rows[i].cells[k];
for (j = 0; j < cell.childNodes.length; j++) {
if (cell.childNodes[j].type == "checkbox") {
cell.childNodes[j].checked = false;
}
}
}
}
}
}
}
</script>
Code Page
<div>
<table style="width: 100%;">
<tr>
<td>
<input type="checkbox" id="chkSelectAll"
runat="server" onclick="SelectAll('chkSelectAll')" />
<asp:Label ID="lblSelectAll" runat="server"
Text="Select All"></asp:Label>
</td>
</tr>
</table>
</div>
<div>
<asp:GridView ID="gvMyGrid" runat="server"
DataKeyNames="sysprivgrpid" Width="850px"
AutoGenerateColumns="False" GridLines="None"
OnRowDataBound="gvMyGrid_RowDataBound" BorderStyle="Solid"
BorderWidth="1px" BorderColor="#DF5015">
<HeaderStyle BackColor="#df5015" Font-Bold="true"
ForeColor="White" />
<RowStyle BackColor="#E1E1E1" />
<AlternatingRowStyle BackColor="White" />
<HeaderStyle BackColor="#df5015" Font-Bold="true"
ForeColor="White" />
<Columns>
<asp:TemplateField HeaderText="Special" >
<ItemTemplate>
<input type="checkbox" id="chkpSpecial"
name="pSpecial" runat="server"
value='<%# Eval("pSpecial") %>' Visible="false"
clientidmode="Static" />
</ItemTemplate>
<HeaderStyle HorizontalAlign="Left" />
</asp:TemplateField>
<asp:TemplateField HeaderText="View" >
<ItemTemplate>
<input type="checkbox" id="chkpView"
name="pView" runat="server"
value='<%# Eval("pView") %>' Visible="false"
clientidmode="Static" />
</ItemTemplate>
<HeaderStyle HorizontalAlign="Left" />
</asp:TemplateField>
<asp:TemplateField HeaderText="Update" >
<ItemTemplate>
<input type="checkbox" id="chkpUpdate"
name="pUpdate" runat="server"
value='<%# Eval("pUpdate") %>' Visible="false"
clientidmode="Static" />
</ItemTemplate>
<HeaderStyle HorizontalAlign="Left" />
</asp:TemplateField>
<asp:TemplateField HeaderText="Delete" >
<ItemTemplate>
<input type="checkbox" id="chkpDelete"
name="pDelete" runat="server"
value='<%# Eval("pDelete") %>' Visible="false"
clientidmode="Static" />
</ItemTemplate>
<HeaderStyle HorizontalAlign="Left" />
</asp:TemplateField>
<asp:TemplateField HeaderText="Add" >
<ItemTemplate>
<input type="checkbox" id="chkpAdd"
name="pAdd" runat="server"
value='<%# Eval("pAdd") %>' Visible="false"
clientidmode="Static" />
</ItemTemplate>
<HeaderStyle HorizontalAlign="Left" />
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>