JS全选问题 复选框是.net服务器控件checkBox 在GridView中的模板列

现在的问题是,全选能选,想非全选checkbox为非选状态,则全选checkbox也为非选状态,如下是我的JS代码:
 function selectall(obj)
           {
          
                     for (var i=0; i<obj.form.elements.length; i++)
                 {
                     if (obj.form.elements[i].type == 'checkbox' && obj.form.elements[i] != obj)
                     {
                         obj.form.elements[i].checked = obj.checked;
                        
                        
                        tr_bgcolor(obj.form.elements[i]);
                     }
                 }
               
             }单选事件如下:
 function tr_bgcolor(c)
             {
                var tr = c.parentNode.parentNode;
                 
                  tr.rowIndex % 2 == 0 ? tr.style.backgroundColor = c.checked ? '#add6a6' : '#FEDFDC' : tr.style.backgroundColor = c.checked ? '#add6d6' : '';
             
              
                           
              }
哪位帮帮小弟喽!或者哪位给一个完整的JS给小弟!

解决方案 »

  1.   

    添加checkbox单击事件 onclick;function checkselect(obj)
    {
    var isSelectAll = true;
    for (var i=0; i<obj.form.elements.length; i++)
    {
    if (obj.form.elements[i].type == 'checkbox' && obj.form.elements[i] != obj)
    {
    if(!obj.form.elements[i].checked)
    {
    isSelectAll = false;
    break;
    }
    }
    }
    document.getElementById("全选ID").checked = isSelectAll;
    }
      

  2.   

    // DEMO<%@ Page Language="C#" %>
    <%@ Import Namespace="System.Data" %><%--http://community.csdn.net/Expert/TopicView3.asp?id=5714048--%><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><script runat="server">    protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack) {
                LoadProductData();
            }
        }  
        
        void LoadProductData()
        {
            DataTable dt = CreateSampleProductData();        GridView1.DataSource = dt;
            GridView1.DataBind();     
        }    #region sample data    static DataTable CreateSampleProductData()
        {
            DataTable tbl = new DataTable("Products");        tbl.Columns.Add("ProductID", typeof(int));
            tbl.Columns.Add("ProductName", typeof(string));        
            tbl.Columns.Add("UnitPrice", typeof(decimal));
            tbl.Columns.Add("CategoryID", typeof(int));        tbl.Rows.Add(1, "Chai", 18, 1);
            tbl.Rows.Add(2, "Chang", 19, 1);
            tbl.Rows.Add(3, "Aniseed Syrup", 10, 2);
            tbl.Rows.Add(4, "Chef Anton's Cajun Seasoning", 22, 2);
            tbl.Rows.Add(5, "Chef Anton's Gumbo Mix", 21.35, 2);
            tbl.Rows.Add(47, "Zaanse koeken", 9.5, 3);
            tbl.Rows.Add(48, "Chocolade", 12.75, 3);
            tbl.Rows.Add(49, "Maxilaku", 20, 3);                return tbl;
        }    #endregion   </script><html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="server">
        <title>CSDN_GridViewAllAndRowCheckBox</title>
        <script type="text/javascript">
        // 选择 GridView 中指定的 checkbox
        function chkAll(sender)
        {
            var grd = document.getElementById("GridView1");
            var chkArr = grd.getElementsByTagName("input");
            for(var i = 0; i < chkArr.length; i++) {
                if(chkArr[i].type == "checkbox" && 
                    chkArr[i].id.indexOf("chkItem") > -1) {
                    chkArr[i].checked = sender.checked;
                }
            }
        }    // 同步chkItem和chkAll
        function chkItem(sender)
        {        
            var grd = document.getElementById("GridView1");
            var chkArr = grd.getElementsByTagName("input");
            var chkAll;
            for(var i = 0; i < chkArr.length; i++) {            
                if(chkArr[i].type == "checkbox" && 
                    chkArr[i].id.indexOf("chkAll") > -1) {
                    chkAll = chkArr[i];
                    break;
                }
            }
            for(var i = 0; i < chkArr.length; i++) {            
                if(chkArr[i].type == "checkbox" && 
                    chkArr[i].id.indexOf("chkItem") > -1 && 
                    !chkArr[i].checked) {
                    chkAll.checked = false;
                    return;
                }
            }
            chkAll.checked = true;
        }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">
                <Columns>
                    <asp:TemplateField>
                        <HeaderTemplate>
                            <asp:CheckBox ID="chkAll" onclick='chkAll(this)' runat="server" />
                        </HeaderTemplate>
                        <ItemTemplate>
                            <asp:CheckBox ID="chkItem" onclick='chkItem()' runat="server" />
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="ProductName">
                        <ItemTemplate>
                            <%# Eval("ProductName") %>
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:BoundField DataField="UnitPrice" HeaderText="UnitPrice" />
                </Columns>
            </asp:GridView>
        </div>
        </form>
    </body>
    </html>
      

  3.   

    // 支持同一页面多个 GridView 的版本<%@ Page Language="C#" %>
    <%@ Import Namespace="System.Data" %><%--http://community.csdn.net/Expert/TopicView3.asp?id=5714048--%><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><script runat="server">    protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack) {
                LoadProductData();
            }
        }  
        
        void LoadProductData()
        {
            DataTable dt = CreateSampleProductData();        GridView1.DataSource = dt;
            GridView1.DataBind();        GridView2.DataSource = dt;
            GridView2.DataBind();     
        }    #region sample data    static DataTable CreateSampleProductData()
        {
            DataTable tbl = new DataTable("Products");        tbl.Columns.Add("ProductID", typeof(int));
            tbl.Columns.Add("ProductName", typeof(string));        
            tbl.Columns.Add("UnitPrice", typeof(decimal));
            tbl.Columns.Add("CategoryID", typeof(int));        tbl.Rows.Add(1, "Chai", 18, 1);
            tbl.Rows.Add(2, "Chang", 19, 1);
            tbl.Rows.Add(3, "Aniseed Syrup", 10, 2);
            tbl.Rows.Add(4, "Chef Anton's Cajun Seasoning", 22, 2);
            tbl.Rows.Add(5, "Chef Anton's Gumbo Mix", 21.35, 2);
            tbl.Rows.Add(47, "Zaanse koeken", 9.5, 3);
            tbl.Rows.Add(48, "Chocolade", 12.75, 3);
            tbl.Rows.Add(49, "Maxilaku", 20, 3);                return tbl;
        }    #endregion   </script><html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="server">
        <title>CSDN_GridViewAllAndRowCheckBox</title>
        <script type="text/javascript">
        /*
         * 功能：选中/取消 GridView 每行指定的 CheckBox
         * 参数：
         *  sender：表示触发事件的 checkbox
         *  chkItemServerID：表示每行目标 checkbox 的服务器控件 ID
        */
        function GridView_SelectAllRow(sender, chkItemServerID)
        {
            var grd = sender.parentNode.parentNode.parentNode; // GridView 呈现为一个 table
            var chkArr = grd.getElementsByTagName("input"); // 获取此 table 内的所有 input
            for(var i = 0; i < chkArr.length; i++) {
                if(chkArr[i].type == "checkbox" && 
                    chkArr[i].id.indexOf(chkItemServerID) > -1) {
                    chkArr[i].checked = sender.checked;
                }
            }
        }    /*
         * 功能：同步 GridView 每行 CheckBox 与全选 CheckBox 的状态
         * 参数：
         *  sender：表示触发事件的 checkbox
         *  chkItemServerID：表示每行目标 checkbox 的服务器控件 ID
         *  chkAllServerID：表示全选功能 checkbox 的服务器控件 ID
        */
        function GridView_SelectRow(sender, chkItemServerID, chkAllServerID)
        {        
            var grd = sender.parentNode.parentNode.parentNode; // GridView 呈现为一个 table
            var chkArr = grd.getElementsByTagName("input"); // 获取此 table 内的所有 input
            var chkAll;
            for(var i = 0; i < chkArr.length; i++) {            
                if(chkArr[i].type == "checkbox" && 
                    chkArr[i].id.indexOf(chkAllServerID) > -1) {
                    chkAll = chkArr[i]; // 获取全选功能 checkbox
                    break;
                }
            }
            
            if(!chkAll) return;
            
            for(var i = 0; i < chkArr.length; i++) {            
                if(chkArr[i].type == "checkbox" && 
                    chkArr[i].id.indexOf(chkItemServerID) > -1 && 
                    !chkArr[i].checked) {
                    chkAll.checked = false;
                    return;
                }
            }
            chkAll.checked = true;
        }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">
                <Columns>
                    <asp:TemplateField>
                        <HeaderTemplate>
                            <asp:CheckBox ID="chkAll" onclick="GridView_SelectAllRow(this, 'chkItem')" runat="server" />
                        </HeaderTemplate>
                        <ItemTemplate>
                            <asp:CheckBox ID="chkItem" onclick="GridView_SelectRow(this, 'chkItem', 'chkAll')"  runat="server" />
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="ProductName">
                        <ItemTemplate>
                            <%# Eval("ProductName") %>
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:BoundField DataField="UnitPrice" HeaderText="UnitPrice" />
                </Columns>
            </asp:GridView>
            <br />
            <br />
            <asp:GridView ID="GridView2" runat="server" AutoGenerateColumns="false" >
                <Columns>
                    <asp:TemplateField>
                        <HeaderTemplate>
                            <asp:CheckBox ID="chkAll" onclick="GridView_SelectAllRow(this, 'chkItem')" runat="server" />
                        </HeaderTemplate>
                        <ItemTemplate>
                            <asp:CheckBox ID="chkItem" onclick="GridView_SelectRow(this, 'chkItem', 'chkAll')" runat="server" />
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="ProductName">
                        <ItemTemplate>
                            <%# Eval("ProductName") %>
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:BoundField DataField="UnitPrice" HeaderText="UnitPrice" />
                </Columns>
            </asp:GridView>
        </div>
        </form>
    </body>
    </html>
      

  4.   

    我这里有简单的全选JS事件function SelectAll(tempControl)
    {
          var theBox=tempControl;
          xState=theBox.checked;    
          elem=theBox.form.elements;
          for(i=0;i<elem.length;i++)
          if(elem[i].type=='checkbox' && elem[i].id!=theBox.id)
          {
            if(elem[i].checked!=xState)
               elem[i].click();
                            
          }
    }   
     调用
    <input id="chall" type="checkbox" onclick="SelectAll(chall)" name="ShoppCartID" value="checkbox">