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

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

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

先来看看第一种方法：

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

控件中复选框

<input id="Checkbox1" type="checkbox" οnclick="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" οnclick="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" οnclick="NoChecked(this.checked)" value='<%#eval_r("MessageNo") %>' />

基本程序是这样的：

全选按钮：

<input id="CheckBoxAll" type="checkbox" οnclick="checkAll()" />全选

绑定项复选框

<ItemTemplate>

                <tr οnmοuseοver="OnTr(this,'#e5f4fd');" οnmοuseοut="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].οnclick= 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);
 }
}

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

 

多思考，多创新，才是正道！