这种全选的效果在后台是很需要的，因为有时候数据很多，如果想删除全部的数据，没有全选按钮岂不是很麻烦，所以很有必要实现这种全选的效果，并执行相关的事件，下面就来看看如何实现
先来看看第一种方法：
首先先布局好全选和控件中复选框按钮，全选按钮我们使用html
控件中复选框
<input id="Checkbox1" type="checkbox" onclick="changeState(this.checked)" />全选
数据项就采用web控件中的复选框：
<asp:CheckBox ID="chk" runat="server"/>
代码如下
<asp:TemplateField HeaderText="全选">
<ItemTemplate>
<asp:CheckBox ID="chk" runat="server"/>
</ItemTemplate>
<HeaderTemplate>
<input id="Checkbox1" type="checkbox" onclick="changeState(this.checked)" />全选
</HeaderTemplate>
</asp:TemplateField>
Js事件
<script type="text/javascript">
function changeState(isChecked)
{
var chk_list=document.getElementsByTagName_r("input");
for(var i=0;i<chk_list.length;i++)
{
if(chk_list[i].type=="checkbox")
{
chk_list[i].checked=isChecked;
}
}
}
</script>
这样就基本实现了点击全选按钮的时候，数据项的复选框也被全部选中了，但是，现在还有一个问题，就是如果全部选中，在取消数据项中的一个选项，那么此时全选的复选框就不应该选中，这个就需要我们来触发控件的DataBound事件，用来自动绑定onclick事件，一般在控件中需要触发事件的，因为不能直接触发服务器事件，所以只能触发js事件，这就需要我们使用html控件，调用js，或者是直接触发绑定控件的DataBound事件，通过Attributes.add为控件添加客户端的onclick等js事件！下面我们就来触发DataBound事件完成上面的需求
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
if(e.Row.RowType==DataControlRowType.DataRow)
{
CheckBox chk = e.Row.FindControl("chk") as CheckBox;
if(chk!=null){
chk.Attributes.Add("onclick", "javascript:if(this.checked==false){document.getElementByIdx_x_x_x('Checkbox1').checked=false}");
}
}
}
下面就基本完成了全选事件
现在话说回来，全选的实现是为了某一个事件而为之，比如删除，如果我们要删除所有的项，那就只能通过全选了，现在我们就来触发删除事件
protected void delButtom_Click(object sender, EventArgs e)
{
bool fig = false;
for (int i = 0; i < this.GridView1.Rows.Count; i++)
{
CheckBox chk = this.GridView1.Rows[i].FindControl("chk") as CheckBox;
if(chk!=null)
{
if(chk.Checked==true)
{
fig = true;
int id =Convert.ToInt32(this.GridView1.DataKeys[i].Value);
NewsManager.Del(id);
}
}
}
if(fig==false)
{
this.ClientScript.RegisterStartupScript(this.GetType(), "", "<script>alert('请选择要删除的新闻')</script>"); ;
}
DateBindNews();
}
下面就来看看第二种方法：
全选部分复选框都是采用的html标签即input标签，和第一种方法大体相同，个别处理方式不一样，最主要的是处理删除事件的时候，它首先是通过js将所有选中复选框的值放到一个控件中，然后再后台获得这个控件的所有值放到数据组中，然后循环这个数组，调用删除方法删除即可！
这个实现类似上面的DataBound事件就简单的多了，直接在html控件中写onclick事件就可以了
<input id="CheckBox1" type="checkbox" onclick="NoChecked(this.checked)" value='<%#eval_r("MessageNo") %>' />
基本程序是这样的：
全选按钮：
<input id="CheckBoxAll" type="checkbox" onclick="checkAll()" />全选
绑定项复选框
<ItemTemplate>
<tr onmouseover="OnTr(this,'#e5f4fd');" onmouseout="OutTr(this,'#FFFFFF');" bgcolor="#FFFFFF">
<td height="20">
<input id="CheckBox1" type="checkbox" value='<%#eval_r("MessageNo") %>' />
</td>
<td height="20">
<asp:HiddenField ID="txtClassId" runat="server" Value='<%#eval_r("MessageNo") %>' />
</td>
Js：
//先获取所有的Checkbox
var chkList = document.getElementsByName("CheckBox1");
window.onload = function()
{
//为所有checkbox添加onclick事件处理，以自动更新“已选择的项”
for(var i=0; i<chkList.length; i++)
{
chkList[i].onclick= chkClick;
}
}
//checkbox的onclick事件，用于更新“已选择的项”
function chkClick(){
var checkedList = "";
//获取所有被选中的项
for(var i=0; i<chkList.length; i++){
if(chkList[i].checked)
{
checkedList += chkList[i].value + ",";
}else
{
document.getElementByIdx_x_x("CheckBoxAll").checked=false;
}
}
//把选中项的列表显示到“已选择的项”中，substring在这里是为了去除最后一个逗号
document.getElementByIdx_x_x("<%=HiddenField1.ClientID %>").value = checkedList.substring(0,checkedList.length-1);
}
function checkAll()
{
var chkall=document.getElementByIdx_x_x("CheckBoxAll");
if(chkall.checked)
{
var checkedList = "";
for(var i=0;i<chkList.length;i++)
{
chkList[i].checked=true;
checkedList += chkList[i].value + ",";
}
document.getElementByIdx_x_x("<%=HiddenField1.ClientID %>").value = checkedList.substring(0,checkedList.length-1);
}
else
{
for(var i=0;i<chkList.length;i++)
chkList[i].checked=false;
document.getElementByIdx_x_x("<%=HiddenField1.ClientID %>").value="";
}
}
后台执行删除事件
protected void linkDeleteAll_Click(object sender, EventArgs e)
{
string type = this.HiddenField1.Value;
if (type != "")
{
string[] keyValue = type.Split(',');
foreach (string keyName in keyValue)
{
BLL.Message.Delete(Convert.ToInt32(keyName));
}
this.HiddenField1.Value = "";
this.M_RepeatertBind((string)ViewState[vsKey]);
}
else
{
Page.ClientScript.RegisterStartupScript(typeof(string), "msg", "<script>alert('请选择需要删除的记录！')</script>");
}
}
或者使用sql语句的in，如
delete from student where id in(1,2,3)
这样也可以
基本流程就是这样，相比第一种方法感觉有些麻烦，不过都能解决问题，适合自己的就可以！
