GridView中实现CheckBox的全选

最新推荐文章于 2021-12-05 00:16:50 发布

转载最新推荐文章于 2021-12-05 00:16:50 发布 · 710 阅读

文章标签：

#server #asp #function #数据库 #服务器 #脚本

JS 专栏收录该内容

5 篇文章

订阅专栏

本文介绍如何在ASP.NET的GridView控件中实现全选功能。通过服务器端代码或客户端JavaScript均可实现对所有复选框的选择状态同步。服务器端方法涉及C#代码逻辑处理，而客户端方法则使用JavaScript来控制选择行为。

用服务器端的方法：
在页面上放一个gridview控件，配置好数据源，编辑列，添加一个模版列，再编辑模版，放入一个checkbox控件。代码如下：

< asp:GridView ID ="GridView1" runat ="server" AllowPaging ="True" AutoGenerateColumns ="False"

DataKeyNames ="AreaID" DataSourceID ="SqlDataSource1" >

< Columns >

< asp:BoundField DataField ="AreaID" HeaderText ="AreaID" ReadOnly ="True" SortExpression ="AreaID" />

< asp:BoundField DataField ="CityID" HeaderText ="CityID" SortExpression ="CityID" />

< asp:TemplateField >

< HeaderTemplate >

< asp:CheckBox ID ="chkAll" runat ="server" AutoPostBack ="True" OnCheckedChanged ="chkAll_CheckedChanged" />

</ HeaderTemplate >

< ItemTemplate >

< asp:CheckBox ID ="chkItem" runat ="server" />

</ ItemTemplate >

</ asp:TemplateField >

</ Columns >

</ asp:GridView >

后台cs代码：

protected void chkAll_CheckedChanged( object sender, EventArgs e)

{

for (int i = 0; i < this.GridView1.Rows.Count; i++)

{

((CheckBox)GridView1.Rows[i].FindControl("chkItem")).Checked = ((CheckBox)this.GridView1.HeaderRow.FindControl("chkAll")).Checked;

}

用脚本实现：

< asp:GridView ID ="GridView1" runat ="server" AllowPaging ="True" AutoGenerateColumns ="False"

DataKeyNames ="AreaID" DataSourceID ="SqlDataSource1" >

< Columns >

< asp:BoundField DataField ="AreaID" HeaderText ="AreaID" ReadOnly ="True" SortExpression ="AreaID" />

< asp:BoundField DataField ="CityID" HeaderText ="CityID" SortExpression ="CityID" />

< asp:TemplateField >

< HeaderTemplate >

< input id ="chkAll" onclick ="SelectAll(this)" ; type =checkbox >

</ HeaderTemplate >

< ItemTemplate >

< input id ="chkItem" type =checkbox >

</ ItemTemplate >

</ asp:TemplateField >

</ Columns >

</ asp:GridView >

再客户端写javascript

< script type = " text/javascript " >

function SelectAll(chkbox)

{

var box=chkbox;

state=theBox.checked;

elem=box.form.elements;

for(i=0;i<elem.length;i++)

if(elem[i].type=="checkbox" && elem[i].id!=box.id)

{

if(elem[i].checked!=state)

{

elem[i].click();

}

</ script >

=========================================================

<asp:TemplateColumn HeaderText="<input type=checkbox name='selectall' onClick='SelectAll(document.Form1)'>全选">
<ItemTemplate>
<asp:CheckBox id="CheckBox1" runat="server"> </asp:CheckBox>
</ItemTemplate>
</asp:TemplateColumn>
function SelectAll(frm)
{
for (var i=0;i <frm.elements.length;i++)
frm.elements[i].checked = frm.selectall.checked;
}

function CheckSelect(frm)
{
var col=frm.elements;
var obj=frm.selectall;
var intEls=0,intChks=0;
for(var i=0;i <col.length;i++)
{
if(col[i].type=="checkbox"&&col[i].name!="selectall")
{
intEls++;
if(col[i].checked)
intChks++;
}
}
obj.checked=(intEls==intChks);
}

=============================================================================== CS代码，我是用DATALIST实现的，GRIDVIEW也差不多吧 if (((CheckBox)sender).Checked) { for (int i = 0; i < DataList1.Items.Count; i++) { CheckBox cb = (CheckBox)DataList1.Items[i].FindControl("cb"); cb.Checked = true; } } else { for (int i = 0; i < DataList1.Items.Count; i++) { CheckBox cb = (CheckBox)DataList1.Items[i].FindControl("cb"); cb.Checked = false; } } 另外附上获得所选CheckBox对应的ID代码 for (int i = 0; i < DataList1.Items.Count; i++) { CheckBox cb = (CheckBox)DataList1.Items[i].FindControl("cb"); HiddenField hf = (HiddenField)DataList1.Items[i].FindControl("HiddenField1"); if(cb.check) { //... } } 用了一个影藏域，绑定数据库里面的ID，希望对你有帮助. ===================================================================================== js代码 GridView中的代码： 0