GridView里面的CheckBox全选

http://hi.baidu.com/dwxgundam/blog/item/fc24a8469efac70972f05de5.html 第一个

GridView 实现客户端全选的两种方法http://dotnet.aspx.cc/article/a8efc285-f0b1-4f8f-8e73-2b7d8724a47c/read.aspx

放到Repeater里面，是放到ItemTemplate里面吗？并绑定一个id标识即可

是的，但是否也可以在JavaScript里面实现吗？？

那要如何才能得到ID呢?在Repeater里面的CheckBox的ID有点难得到哦

到html/javascript论坛去问。

完整的例子，拷贝执行即可
<%@ Page Language="C#" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
  System.Data.DataSet ds;
  protected void Page_Load(object sender, EventArgs e)
  {
    ds = new System.Data.DataSet();
    System.Data.DataTable dataTable1 = new System.Data.DataTable("BlogUser");
    System.Data.DataRow dr;
    dataTable1.Columns.Add(new System.Data.DataColumn("UserId", typeof(System.Int32)));
    dataTable1.Columns.Add(new System.Data.DataColumn("UserName", typeof(System.String)));
    dataTable1.PrimaryKey = new System.Data.DataColumn[] { dataTable1.Columns["UserId"] };
    for (int i = 0; i < 8; i++)
    {
      dr = dataTable1.NewRow();
      dr[0] = i;
      dr[1] = "用户姓名【孟子E章】测试" + i.ToString();
      dataTable1.Rows.Add(dr);
    }
    System.Data.DataTable dataTable2 = new System.Data.DataTable("BlogArticle");
    dataTable2.Columns.Add(new System.Data.DataColumn("ArticleId", typeof(System.Int32)));
    dataTable2.Columns.Add(new System.Data.DataColumn("Title", typeof(System.String)));
    dataTable2.Columns.Add(new System.Data.DataColumn("UserId", typeof(System.Int32)));
    dataTable2.PrimaryKey = new System.Data.DataColumn[] { dataTable1.Columns["ArticleId"] };
    Random rd = new Random();
    for (int i = 0; i < 20; i++)
    {
      dr = dataTable2.NewRow();
      dr[0] = i;
      dr[1] = "文章标题例子" + i.ToString();
      dr[2] = rd.Next(0, 7);
      dataTable2.Rows.Add(dr);
    }
    ds.Tables.Add(dataTable1);
    ds.Tables.Add(dataTable2);
    System.Data.DataColumn parentColumn = ds.Tables["BlogUser"].Columns["UserId"];
    System.Data.DataColumn childColumn = ds.Tables["BlogArticle"].Columns["UserId"];
    System.Data.DataRelation user_article = new System.Data.DataRelation("UserId", parentColumn, childColumn);
    ds.Relations.Add(user_article);
    this.Repeater1.DataSource = ds.Tables["BlogUser"].DefaultView;
    this.Repeater1.DataBind();
  }  protected void Repeater1_ItemDataBound(object sender, RepeaterItemEventArgs e)
  {
    System.Data.DataView dvv = ds.Tables["BlogArticle"].DefaultView;
    if (e.Item.ItemType == ListItemType.AlternatingItem || e.Item.ItemType == ListItemType.Item)
    {
      GridView g = e.Item.FindControl("g") as GridView;
      System.Data.DataRowView dv = e.Item.DataItem as System.Data.DataRowView;
      dvv.RowFilter = "UserId=" + dv["UserId"].ToString();
      g.DataSource = dvv;
      g.DataBind();
    }
  }
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>嵌套的控件全选</title>
  <script type="text/javascript">
    function selectAll(chx) {
      var checked = chx.checked;
      var t = chx.parentNode;
      while (t.tagName != "TABLE") {
        t = t.parentNode;
      }
      for (i = 1; i < t.rows.length; i++) {
        t.rows[i].cells[0].getElementsByTagName("input")[0].checked = checked;
      }
    }
  </script>
</head>
<body>
  <form id="form1" runat="server">
  <asp:Repeater ID="Repeater1" runat="server" OnItemDataBound="Repeater1_ItemDataBound">
    <ItemTemplate>
      <h1><%#Eval("UserName")%></h1>
      <asp:GridView ID="g" runat="server" AutoGenerateColumns="false">
        <Columns>
          <asp:TemplateField>
            <HeaderTemplate>
              <asp:CheckBox ID="c" runat="server" onclick="selectAll(this)" />
            </HeaderTemplate>
            <ItemTemplate>
              <asp:CheckBox ID="item" runat="server" />
            </ItemTemplate>
          </asp:TemplateField>
          <asp:BoundField DataField="Title" HeaderText="文章标题" />
        </Columns>
      </asp:GridView>
    </ItemTemplate>
  </asp:Repeater>
  </form>
</body>
</html>

有什么难的啊，你FindControl不就得到了

方法2
<%@ Page Language="C#" EnableViewState="false" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
  System.Data.DataSet ds;
  protected void Page_Load(object sender, EventArgs e)
  {
    ds = new System.Data.DataSet();
    System.Data.DataTable dataTable1 = new System.Data.DataTable("BlogUser");
    System.Data.DataRow dr;
    dataTable1.Columns.Add(new System.Data.DataColumn("UserId", typeof(System.Int32)));
    dataTable1.Columns.Add(new System.Data.DataColumn("UserName", typeof(System.String)));
    dataTable1.PrimaryKey = new System.Data.DataColumn[] { dataTable1.Columns["UserId"] };
    for (int i = 0; i < 8; i++)
    {
      dr = dataTable1.NewRow();
      dr[0] = i;
      dr[1] = "用户姓名【孟子E章】测试" + i.ToString();
      dataTable1.Rows.Add(dr);
    }
    System.Data.DataTable dataTable2 = new System.Data.DataTable("BlogArticle");
    dataTable2.Columns.Add(new System.Data.DataColumn("ArticleId", typeof(System.Int32)));
    dataTable2.Columns.Add(new System.Data.DataColumn("Title", typeof(System.String)));
    dataTable2.Columns.Add(new System.Data.DataColumn("UserId", typeof(System.Int32)));
    dataTable2.PrimaryKey = new System.Data.DataColumn[] { dataTable1.Columns["ArticleId"] };
    Random rd = new Random();
    for (int i = 0; i < 20; i++)
    {
      dr = dataTable2.NewRow();
      dr[0] = i;
      dr[1] = "文章标题例子" + i.ToString();
      dr[2] = rd.Next(0, 7);
      dataTable2.Rows.Add(dr);
    }
    ds.Tables.Add(dataTable1);
    ds.Tables.Add(dataTable2);
    System.Data.DataColumn parentColumn = ds.Tables["BlogUser"].Columns["UserId"];
    System.Data.DataColumn childColumn = ds.Tables["BlogArticle"].Columns["UserId"];
    System.Data.DataRelation user_article = new System.Data.DataRelation("UserId", parentColumn, childColumn);
    ds.Relations.Add(user_article);
    this.Repeater1.DataSource = ds.Tables["BlogUser"].DefaultView;
    this.Repeater1.DataBind();
  }  protected void Repeater1_ItemDataBound(object sender, RepeaterItemEventArgs e)
  {
    System.Data.DataView dvv = ds.Tables["BlogArticle"].DefaultView;
    if (e.Item.ItemType == ListItemType.AlternatingItem || e.Item.ItemType == ListItemType.Item)
    {
      GridView g = e.Item.FindControl("g") as GridView;
      System.Data.DataRowView dv = e.Item.DataItem as System.Data.DataRowView;
      dvv.RowFilter = "UserId=" + dv["UserId"].ToString();
      g.DataSource = dvv;
      g.DataBind();
      CheckBox c = e.Item.FindControl("c") as CheckBox;
      c.Attributes.Add("onclick", "selectAll(this,'" + g.ClientID + "')");
    }
  }
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>嵌套的控件全选</title>
  <script type="text/javascript">
    function selectAll(chx,tid) {
      var checked = chx.checked;
      var t = document.getElementById(tid);
      for (i = 0; i < t.rows.length; i++) {
        t.rows[i].cells[0].getElementsByTagName("input")[0].checked = checked;
      }
    }
  </script>
</head>
<body>
  <form id="form1" runat="server">
  <asp:Repeater ID="Repeater1" runat="server" OnItemDataBound="Repeater1_ItemDataBound">
    <ItemTemplate>
      <h1><asp:CheckBox ID="c" runat="server" /> <%#Eval("UserName")%></h1>
      <asp:GridView ID="g" runat="server" AutoGenerateColumns="false" ShowHeader="false">
        <Columns>
          <asp:TemplateField>
            <ItemTemplate>
              <asp:CheckBox ID="item" runat="server" />
            </ItemTemplate>
          </asp:TemplateField>
          <asp:BoundField DataField="Title" />
        </Columns>
      </asp:GridView>
    </ItemTemplate>
  </asp:Repeater>
  </form>
</body>
</html>

使用javascript实现gridview全选
javascript代码：
function CheckAll(oCheckbox)
  {
   var GridView2 = document.getElementById("<%=GridView2.ClientID %>");
   for(i = 1;i < GridView2.rows.length; i++)
   {
    GridView2.rows[i].cells[0].getElementsByTagName("INPUT")[0].checked = oCheckbox.checked;
   }
  }
C#代码：
<asp:GridView ID="GridView2" runat="server" Font-Size="12px" BackColor="#FFFFFF"
            GridLines="Both" CellPadding="4" DataKeyNames="序号" AutoGenerateColumns="false">
            <HeaderStyle BackColor="#EDEDED" Height="26px" />
            <Columns>
              <asp:TemplateField>
                <HeaderTemplate>
                  <input id="Checkbox2" type="checkbox" onclick="CheckAll(this)" runat="server" /><label>全选</label>
                </HeaderTemplate>
                <ItemTemplate>
                  <asp:CheckBox ID="ItemCheckBox" runat="server" />
                </ItemTemplate>
              </asp:TemplateField>
              <asp:BoundField DataField="数据字段" HeaderText="标头" />
            </Columns>
          </asp:GridView>

给你看一个我以前写过的一个例子吧:
<s:form name="search_condtion_form" target="bottom">
<table style="margin-top:5px;margin-bottom: 5px;height: 5px">
<tr align="center">
<td>
<input type="button" name="selectAllForm" value="全选"
onclick="selectAll(this.form);"/>
<input type="button" name="cancelAllForm" value="全不选"
onclick="cancelAll(this.form)"/>
<input type="button" name="updateForm" value="更新"
onclick="updateCode()" />
<input type="button" name="deleteFrom" value="删除"
onclick="delCode()" />
</td>
</tr>
</table>
</s:form>
以下是JS部分:
function selectAll(form)
{
for(i=0;i <form.elements.length;i++)
{
//alert(form.elements[i].name);
if(form.elements[i].name == null || form.elements[i].name == "" ){
continue;
}
if(form.elements[i].name == "checkCode")
{
form.elements[i].checked = true;
}
if(form.elements[i].name == "codeName" || form.elements[i].name == "code")
{
form.elements[i].disabled = false;
}
}
}

可行，但有点小错误
var GridView2 = document.getElementById("<%=GridView2.ClientID %>");
改成
var GridView2 = document.getElementById("GridView2");

如果把form换个命名，比如说是area，就更明确了。

调试易

GridView里面的CheckBox全选

解决方案 »