none
如何让checkbox互不干扰 RRS feed

  • 问题

  • 页面有个2个gridview,都内嵌了checkbox,页面还有一个单独的checkbox,gridview的有全选功能,撤销全选,我想在做全选,取消全选时,这些都互不干扰,如何去实现。用JavaScript或者jQuery都行。
    2010年8月26日 9:45

答案

  • 你不要使用 document.getElementsByTagName,通过 gridview.getElementsByTagName 来获取 checkbox 或遍历行的方式来做嘛

    <%@ Page Language="C#" AutoEventWireup="true" %>
    <%@ Import Namespace="System.Data" %>
    <script runat="server">
      protected void Page_Load(object sender, EventArgs e)
      {
        DataTable dt = new DataTable();
        dt.Columns.Add("Id", typeof(int));
        dt.Columns.Add("Name", typeof(string));
        
        dt.PrimaryKey = new DataColumn[] { dt.Columns["Id"] };
    
        dt.Rows.Add(new object[] { 1, "Sam"});
        dt.Rows.Add(new object[] { 2, "XXY" });
    
        this.GridView1.DataSource = dt;
        this.GridView1.DataBind();
        this.GridView2.DataSource = dt;
        this.GridView2.DataBind();
      }
    
    </script>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
      <title>GridView 客户端全选</title>
      <script language="javascript" type="text/javascript">
        function CheckAll(gridView, checkBox)
        {
          for(var i = 0; i < gridView.rows.length; i ++)
          {
            gridView.rows[i].cells[0].getElementsByTagName("input")[0].checked = checkBox.checked;
          }
        }
        </script>
    </head>
    <body>
      <form id="form1" runat="server">
      <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False">
        <Columns>
          <asp:TemplateField>
            <HeaderTemplate>
              <asp:CheckBox ID="CheckBox1" onclick="CheckAll(document.getElementById('GridView1'),this);" runat="server" />
            </HeaderTemplate>
            <ItemTemplate>
              <asp:CheckBox ID="CheckBox1" runat="server" />
            </ItemTemplate>
          </asp:TemplateField>
          <asp:BoundField DataField="Id" HeaderText="Id" />
          <asp:BoundField DataField="Name" HeaderText="Name" />
        </Columns>
      </asp:GridView>
      <asp:GridView ID="GridView2" runat="server" AutoGenerateColumns="False">
        <Columns>
          <asp:TemplateField>
            <HeaderTemplate>
              <asp:CheckBox ID="CheckBox1" onclick="CheckAll(document.getElementById('GridView2'),this);" runat="server" />
            </HeaderTemplate>
            <ItemTemplate>
              <asp:CheckBox ID="CheckBox1" runat="server" />
            </ItemTemplate>
          </asp:TemplateField>
          <asp:BoundField DataField="Id" HeaderText="Id" />
          <asp:BoundField DataField="Name" HeaderText="Name" />
        </Columns>
      </asp:GridView>
      </form>
    </body>
    </html>


    知识改变命运,奋斗成就人生!
    • 已标记为答案 fangyanqin 2010年8月28日 7:16
    2010年8月26日 10:31
    版主

全部回复

  • 你不要使用 document.getElementsByTagName,通过 gridview.getElementsByTagName 来获取 checkbox 或遍历行的方式来做嘛

    <%@ Page Language="C#" AutoEventWireup="true" %>
    <%@ Import Namespace="System.Data" %>
    <script runat="server">
      protected void Page_Load(object sender, EventArgs e)
      {
        DataTable dt = new DataTable();
        dt.Columns.Add("Id", typeof(int));
        dt.Columns.Add("Name", typeof(string));
        
        dt.PrimaryKey = new DataColumn[] { dt.Columns["Id"] };
    
        dt.Rows.Add(new object[] { 1, "Sam"});
        dt.Rows.Add(new object[] { 2, "XXY" });
    
        this.GridView1.DataSource = dt;
        this.GridView1.DataBind();
        this.GridView2.DataSource = dt;
        this.GridView2.DataBind();
      }
    
    </script>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
      <title>GridView 客户端全选</title>
      <script language="javascript" type="text/javascript">
        function CheckAll(gridView, checkBox)
        {
          for(var i = 0; i < gridView.rows.length; i ++)
          {
            gridView.rows[i].cells[0].getElementsByTagName("input")[0].checked = checkBox.checked;
          }
        }
        </script>
    </head>
    <body>
      <form id="form1" runat="server">
      <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False">
        <Columns>
          <asp:TemplateField>
            <HeaderTemplate>
              <asp:CheckBox ID="CheckBox1" onclick="CheckAll(document.getElementById('GridView1'),this);" runat="server" />
            </HeaderTemplate>
            <ItemTemplate>
              <asp:CheckBox ID="CheckBox1" runat="server" />
            </ItemTemplate>
          </asp:TemplateField>
          <asp:BoundField DataField="Id" HeaderText="Id" />
          <asp:BoundField DataField="Name" HeaderText="Name" />
        </Columns>
      </asp:GridView>
      <asp:GridView ID="GridView2" runat="server" AutoGenerateColumns="False">
        <Columns>
          <asp:TemplateField>
            <HeaderTemplate>
              <asp:CheckBox ID="CheckBox1" onclick="CheckAll(document.getElementById('GridView2'),this);" runat="server" />
            </HeaderTemplate>
            <ItemTemplate>
              <asp:CheckBox ID="CheckBox1" runat="server" />
            </ItemTemplate>
          </asp:TemplateField>
          <asp:BoundField DataField="Id" HeaderText="Id" />
          <asp:BoundField DataField="Name" HeaderText="Name" />
        </Columns>
      </asp:GridView>
      </form>
    </body>
    </html>


    知识改变命运,奋斗成就人生!
    • 已标记为答案 fangyanqin 2010年8月28日 7:16
    2010年8月26日 10:31
    版主
  • 谢谢指导,
    2010年8月28日 7:15