全选按钮的实现及事件的处理

这种全选的效果在后台是很需要的，因为有时候数据很多，如果想删除全部的数据，没有全选按钮岂不是很麻烦，所以很有必要实现这种全选的效果，并执行相关的事件，下面就来看看如何实现

先来看看第一种方法：

首先先布局好全选和控件中复选框按钮，全选按钮我们使用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("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.getElementById('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)

这样也可以

第三种方式

JS

<script language="JavaScript">
function select_all() {
for (i = 0; i < window.document.Form1.length; i++) {
if (window.document.Form1.elements[i].type == "checkbox") {
window.document.Form1.elements[i].checked = window.document.Form1.selectall.checked;
}
}

}
</script>

html

<input type='checkbox' name='selectall' value='0' onClick='javascript:select_all();'></input>全选

要选择的： <asp:HiddenField ID="hid" runat="server" Value='<%#Eval("f_id")%>' />
<asp:checkbox id="chk" runat="server"></asp:checkbox>

cs：

protected void ButDel_Click(object sender, ImageClickEventArgs e)
{
//如果没选择要删除的项，给予提示
bool fig = false;
for (int i = 0; i <list_Repeater1.Items.Count ; i++)
{

CheckBox chk = list_Repeater1.Items[i].FindControl("chk") as CheckBox;
HiddenField hid = list_Repeater1.Items[i].FindControl("hid") as HiddenField;
if(chk!=null)
{
if(chk.Checked==true)
{
bf.Delete(Convert.ToInt32(hid.Value));
fig = true;
}
}

}
if(fig==false)
{
this.ClientScript.RegisterStartupScript(this.GetType(), "", "<script>alert('请选择要删除的视频')</script>");
}
Bind();
}

第四种：jquery实现

function checkAll(chkobj){
if($(chkobj).text()=="全选")
{
$(chkobj).text("取消");
$(".checkall input").attr("checked", true);
}else{
$(chkobj).text("全选");
$(".checkall input").attr("checked", false);
}
}

基本流程就是这样，这三种方式大同小异，逻辑都差不多，总结起来，以后直接使用，提高工作效率！