点击button按钮实现全选_全选按钮的实现及事件的处理

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

先来看看第一种方法：

首先先布局好全选和控件中复选框按钮，全选按钮我们使用html

控件中复选框

全选

数据项就采用web控件中的复选框：

代码如下

全选

Js事件

function changeState(isChecked)

{

var chk_list=document.getElementsByTagName("input");

for(var i=0;i

{

if(chk_list[i].type=="checkbox")

{

chk_list[i].checked=isChecked;

}

}

}

这样就基本实现了点击全选按钮的时候，数据项的复选框也被全部选中了，但是，现在还有一个问题，就是如果全部选中，在取消数据项中的一个选项，那么此时全选的复选框就不应该选中，这个就需要我们来触发控件的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(), "", ""); ;

}

DateBindNews();

}

下面就来看看第二种方法：

全选部分复选框都是采用的html标签即input标签，和第一种方法大体相同，个别处理方式不一样，最主要的是处理删除事件的时候，它首先是通过js将所有选中复选框的值放到一个控件中，然后再后台获得这个控件的所有值放到数据组中，然后循环这个数组，调用删除方法删除即可！

这个实现类似上面的DataBound事件就简单的多了，直接在html控件中写onclick事件就可以了

' />

基本程序是这样的：

全选按钮：

全选

绑定项复选框

' />

Js：

//先获取所有的Checkbox

var chkList = document.getElementsByName("CheckBox1");

window.onload = function()

{

//为所有checkbox添加onclick事件处理，以自动更新“已选择的项”

for(var i=0; i

{

chkList[i].οnclick= chkClick;

}

}

//checkbox的onclick事件，用于更新“已选择的项”

function chkClick(){

var checkedList = "";

//获取所有被选中的项

for(var i=0; i

if(chkList[i].checked)

{

checkedList += chkList[i].value + ",";

}else

{

document.getElementByIdx_x_x("CheckBoxAll").checked=false;

}

}

//把选中项的列表显示到“已选择的项”中，substring在这里是为了去除最后一个逗号

document.getElementByIdx_x_x("").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[i].checked=true;

checkedList += chkList[i].value + ",";

}

document.getElementByIdx_x_x("").value = checkedList.substring(0,checkedList.length-1);

}

else

{

for(var i=0;i

chkList[i].checked=false;

document.getElementByIdx_x_x("").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", "");

}

}

或者使用sql语句的in，如

delete from student where id in(1,2,3)

这样也可以

第三种方式

JS

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;

}

}

}

html

全选

要选择的：

cs：

protected void ButDel_Click(object sender, ImageClickEventArgs e)

{

//如果没选择要删除的项，给予提示

bool fig = false;

for (int i = 0; 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(), "", "");

}

Bind();

}

第四种：jquery实现

function checkAll(chkobj){

if($(chkobj).text()=="全选")

{

$(chkobj).text("取消");

$(".checkall input").attr("checked", true);

}else{

$(chkobj).text("全选");

$(".checkall input").attr("checked", false);

}

}

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