利用JavaScript实现GridView上方的 全选中，全驳回 控制 GridView中 CheckBox的功能

注意点：

1.选中 全核准 下方的核准checkbox 被选中，同时驳回的checkbox 要取消选中状态。

2.选中 全驳回 功能类似上方

3.选中下方的 核准checkbox 要使对应的驳回checkbox取消选中状态。同时要注意上方的 全核准 和全驳回 checkbox。

关键代码：

HTML:

<p><asp:Literal ID="ApproveCheckBoxIDsArray" runat="server"></asp:Literal>
<asp:Literal ID="RejectCheckBoxIDsArray" runat="server"></asp:Literal></p>

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="form_no" CellPadding="4"
ForeColor="#333333" GridLines="Both" AllowSorting="True" OnSorting="GridView1_Sorting" AllowPaging="True" OnPageIndexChanging="GridView1_PageIndexChanging"
OnRowDataBound="GridView1_RowDataBound" OnDataBound="GridView1_DataBound" PageSize="50">
<FooterStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
<Columns>

<asp:TemplateField headertext="[[Agree]]">
<ItemTemplate>
<asp:CheckBox ID="ckbDgdApprove" runat="server" />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField headertext="[[Reject]]">
<ItemTemplate>
<asp:CheckBox ID="ckbDgdReject" runat="server" />
</ItemTemplate>
</asp:TemplateField>

</Columns>

</asp:GridView>

2.添加JavaScript文件

function ChangeCheckBoxState(id, checkState) {
var cb = document.getElementById(id);
if (cb != null)
cb.checked = checkState;
}

function ChangeAllApproveCheckBoxStates(checkState) {
//更新CheckBoxIDs数组中所有的CheckBox的checkState
if (ApproveCheckBoxIDs != null) {
for (var i = 0; i <= ApproveCheckBoxIDs.length; i++)
ChangeCheckBoxState(ApproveCheckBoxIDs[i], checkState);
}
if(checkState && RejectCheckBoxIDs != null) {
for (var i = 0; i <= RejectCheckBoxIDs.length; i++)
ChangeCheckBoxState(RejectCheckBoxIDs[i], false);
}
}

function ChangeAllRejectCheckBoxStates(checkState) {
//更新CheckBoxIDs数组中所有的CheckBox的checkState
if (RejectCheckBoxIDs != null) {
for (var i = 0; i <= RejectCheckBoxIDs.length; i++)
ChangeCheckBoxState(RejectCheckBoxIDs[i], checkState);
}
if(checkState && ApproveCheckBoxIDs != null) {
for (var i = 0; i <= ApproveCheckBoxIDs.length; i++)
ChangeCheckBoxState(ApproveCheckBoxIDs[i], false);
}
}

function ApproveChangeHeaderAsNeeded() {
//连动更新Header的CheckBox
if (ApproveCheckBoxIDs != null) {
// 检查是否所有CheckBox?中
for (var i = 1; i < ApproveCheckBoxIDs.length; i++) {
var cb = document.getElementById(ApproveCheckBoxIDs[i]);
if (cb.checked) {
// 有任何一个CheckBox未?中?则Header的CheckBox不?中
ChangeCheckBoxState(RejectCheckBoxIDs[0], false);
ChangeCheckBoxState(RejectCheckBoxIDs[i], false);
}
}
for (var i = 1; i < ApproveCheckBoxIDs.length; i++) {
var cb = document.getElementById(ApproveCheckBoxIDs[i]);
if (!cb.checked) {
// 有任何一个CheckBox未?中?则Header的CheckBox不?中
ChangeCheckBoxState(ApproveCheckBoxIDs[0], false);
return;
}
}
//如果代码??到???则所有CheckBox?中?则Header的CheckBox也?中
ChangeCheckBoxState(ApproveCheckBoxIDs[0], true);
ChangeCheckBoxState(RejectCheckBoxIDs[0], false);
}
}

function RejectChangeHeaderAsNeeded() {
//连动更新Header的CheckBox
if (RejectCheckBoxIDs != null) {
// 检查是否所有CheckBox?中
for (var i = 1; i < RejectCheckBoxIDs.length; i++) {
var cb = document.getElementById(RejectCheckBoxIDs[i]);
if (cb.checked) {
// 有任何一个CheckBox未?中?则Header的CheckBox不?中
ChangeCheckBoxState(ApproveCheckBoxIDs[0], false);
ChangeCheckBoxState(ApproveCheckBoxIDs[i], false);
}
}
for (var i = 1; i < RejectCheckBoxIDs.length; i++) {
var cb = document.getElementById(RejectCheckBoxIDs[i]);
if (!cb.checked) {
// 有任何一个CheckBox未?中?则Header的CheckBox不?中
ChangeCheckBoxState(RejectCheckBoxIDs[0], false);
return;
}
}
//如果代码??到???则所有CheckBox?中?则Header的CheckBox也?中
ChangeCheckBoxState(RejectCheckBoxIDs[0], true);
ChangeCheckBoxState(ApproveCheckBoxIDs[0], false);
}
}

3.为GridView添加

DataBound事件，实现客户端Header的
onclick
的方法

#region GridView1_DataBound
protected void GridView1_DataBound(object sender, EventArgs e)
{
//每次数据绑定到GridView????建立CheckBoxIDs数组
//获得header CheckBox
//CheckBox cbHeader = GridView1.HeaderRow.FindControl("HeaderLevelApproveCheckBox") as CheckBox;
//当点击header CheckBox 全?/取消 时???客户端ChangeCheckBoxState函数
//cbHeader.Attributes.Add("onclick", "ChangeAllCheckBoxStates(this.checked);");
//添加Header CheckBox's ID 到客户端 CheckBoxIDs 数组
List<string> ArrayApproveValues = new List<string>();
List<string> ArrayRejectValues = new List<string>();
//ArrayValues.Add(string.Concat("'", cbHeader.ClientID, "'"));
ArrayApproveValues.Add(string.Concat("'", ckbApprove.ClientID, "'"));
ArrayRejectValues.Add(string.Concat("'", ckbReject.ClientID, "'"));

foreach (GridViewRow gvr in GridView1.Rows)
{
//?取ItemTemplate中CheckBox
CheckBox ca = gvr.FindControl("ckbDgdApprove") as CheckBox;
CheckBox cj = gvr.FindControl("ckbDgdReject") as CheckBox;
//如果Item CheckBox有一?为?中?则Header CheckBox未?中
ca.Attributes.Add("onclick", "ApproveChangeHeaderAsNeeded();");
cj.Attributes.Add("onclick", "RejectChangeHeaderAsNeeded();");
//添加Item CheckBox's ID 到客户端 CheckBoxIDs 数组
ArrayApproveValues.Add(string.Concat("'", ca.ClientID, "'"));
ArrayRejectValues.Add(string.Concat("'", cj.ClientID, "'"));
}
//?出ArrayValues数组到Literal 控件 (<p><asp:Literal ID="ApproveCheckBoxIDsArray" runat="server"></asp:Literal></p>)
ApproveCheckBoxIDsArray.Text = "<script type=\"text/javascript\">" + string.Concat("var ApproveCheckBoxIDs = new Array(", string.Join(",", ArrayApproveValues.ToArray()), ");") + "</script>";
RejectCheckBoxIDsArray.Text = "<script type=\"text/javascript\">" + string.Concat("var RejectCheckBoxIDs = new Array(", string.Join(",", ArrayRejectValues.ToArray()), ");") + "</script>";
}
#endregion

4.生成测试数据

Code Snippet

protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
DirectoryInfo dirInfo = new DirectoryInfo(Request.PhysicalApplicationPath);
GridView1.DataSource = dirInfo.GetFiles();
GridView1.DataBind();
}
}