用javascript实现DataGrid CheckBox类似于HotMail 全选

本文介绍了一个ASP.NET应用程序中如何在DataGrid控件内使用复选框进行多选操作，并提供了完整的实现代码，包括C#后端逻辑、JavaScript交互及样式设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

代码如下:
CheckBoxOnDataGrid.aspx

<%@ Page language="c#" Codebehind="CheckBoxOnDataGrid.aspx.cs" AutoEventWireup="false" Inherits="Text_WebApp.CheckBoxOnDataGrid" %>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >

<HTML>

<HEAD>

<title>CheckBoxOnDataGrid</title>

</HEAD>

<br>

<ASP:DataGrid id="MyDataGrid" runat="server" Width="696px" BackColor="white" BorderColor="black"

CellPadding="3" CellSpacing="0" Font-Size="9pt" AutoGenerateColumns="False" HeaderStyle-BackColor="darkred"

HeaderStyle-ForeColor="white" Height="160px">

<asp:TemplateColumn>

</HeaderTemplate>

<asp:CheckBox ID="DeleteThis" onclick="javascript:CCA(this);" runat="server" />

</ItemTemplate>

</asp:TemplateColumn>

<asp:TemplateColumn>

</HeaderTemplate>

<asp:Label ID="StoreID" Text='<%# DataBinder.Eval (Container.DataItem, "ID") %>' runat="server"/>

</ItemTemplate>

</asp:TemplateColumn>

<asp:BoundColumn HeaderText="Store" Datafield="Store" runat="server" />

<asp:BoundColumn HeaderText="Address" Datafield="Address" runat="server" />

<asp:BoundColumn HeaderText="City" Datafield="City" runat="server" />

<asp:BoundColumn HeaderText="State" Datafield="State" runat="server" />

<asp:BoundColumn HeaderText="Zip" Datafield="Zip" runat="server" />

</Columns>

</ASP:DataGrid>

<br>

<asp:Button Text="Delete Items" ID="Confirm" runat="server" />

</form>

</body>

</HTML>

CheckBoxOnDataGrid.aspx.cs

using System;

using System.Collections;

using System.ComponentModel;

using System.Data;

using System.Drawing;

using System.Web;

using System.Web.SessionState;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Web.UI.HtmlControls;

using System.Data.SqlClient;

namespace Text_WebApp

{

/// <summary>

/// CheckBoxOnDataGrid 的摘要说明。

/// </summary>

public class CheckBoxOnDataGrid : System.Web.UI.Page

{

protected System.Web.UI.WebControls.DataGrid MyDataGrid;

protected System.Web.UI.WebControls.Button Confirm;

protected System.Web.UI.HtmlControls.HtmlGenericControl OutputMsg;

private SqlConnection objConnect;

private void Page_Load(object sender, System.EventArgs e)

{

// 在此处放置用户代码以初始化页面

objConnect = new SqlConnection ("server=(local);database=pubs;uid=sa;pwd=;");

if (!IsPostBack)

{

BindData();

}

Web 窗体设计器生成的代码

public void BindData()

{

String sqlQuery = "Select stor_id As Id, stor_name As Store, City, State, Zip, stor_Address As Address from Stores";

DataSet ds=new DataSet();

SqlDataAdapter Sda=new SqlDataAdapter(sqlQuery,objConnect);

Sda.Fill(ds,"Tb");

MyDataGrid.DataSource =ds.Tables["Tb"];

MyDataGrid.DataBind();

objConnect.Close();

objConnect = null;

}

private void Confirm_Click(object sender, System.EventArgs e)

{

string dgIDs = "";

bool BxsChkd = false;

foreach (DataGridItem i in MyDataGrid.Items)

{

CheckBox deleteChkBxItem = (CheckBox) i.FindControl ("DeleteThis");

if (deleteChkBxItem.Checked)

{

BxsChkd = true;

dgIDs += ((Label) i.FindControl ("StoreID")).Text.ToString() + ",";

}

string deleteSQL = "DELETE from Stores WHERE stor_id IN (" + dgIDs.Substring (0, dgIDs.LastIndexOf (",")) + ")";

if (BxsChkd == true)

{

try

{

//SqlHelper.ExecuteNonQuery (objConnect, CommandType.Text, deleteSQL);

OutputMsg.InnerHtml+="删除"+dgIDs.ToString().Trim()+"成功";

OutputMsg.Style["color"] = "#3366cc";

}

catch (SqlException err)

{

OutputMsg.InnerHtml += err.Message.ToString();

OutputMsg.Style["color"] = "#6699cc";

}

BindData();

}

CheckBox.js

//CheckBox全选

function CA(){

var frm=document.Form1;

for (var i=0;i<frm.elements.length;i++)

{

var e=frm.elements[i];

if ((e.name != 'allbox') && (e.type=='checkbox'))

{

e.checked=frm.allbox.checked;

if (frm.allbox.checked)

{

hL(e);

}//endif

else

{

dL(e);

}//endelse

}//endif

}//endfor

}

//CheckBox选择项

function CCA(CB)

{

var frm=document.Form1;

if (CB.checked)

hL(CB);

else

dL(CB);

var TB=TO=0;

for (var i=0;i<frm.elements.length;i++)

{

var e=frm.elements[i];

if ((e.name != 'allbox') && (e.type=='checkbox'))

{

TB++;

if (e.checked)

TO++;

}

frm.allbox.checked=(TO==TB)?true:false;

}

function hL(E){

while (E.tagName!="TR")

{E=E.parentElement;}

E.className="H";

}

function dL(E){

while (E.tagName!="TR")

{E=E.parentElement;}

E.className="";

}

style.css

font-size : 9pt;

}

.H{

font-size : 9pt;

cursor:hand;

color:#3366ff;

background : #FFF3F3;

}