Friday 30 March 2012

Select/ DeSelect all checkboxes in gridview using javascript


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default16.aspx.cs" Inherits="Default16" %>

<!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 runat="server">
    <title></title>
    <script language="javascript" type="text/javascript">

        function x() {
            var m = document.getElementById('gv')
            var n = m.rows[0].getElementsByTagName("input")
            if (n[0].checked) {
                for (var i = 1; i < m.rows.length; i++) {
                    n = m.rows[i].getElementsByTagName("input")
                    for (var j = 0; j < n.length; j++)
                        n[j].checked = true
                }
            }
            else {
                for (var i = 1; i < m.rows.length; i++) {
                    n = m.rows[i].getElementsByTagName("input")
                    for (var j = 0; j < n.length; j++)
                        n[j].checked =false
                }
            }


        }
        function y() {
            var m = document.getElementById('gv')
            var n = m.rows[0].getElementsByTagName("input")
            n[0].checked = false
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
 
    <center>
    <asp:GridView ID="gv" runat="server">
    <Columns>
    <asp:TemplateField>
    <HeaderTemplate>
    <asp:CheckBox ID="cb" runat="server"  onclick="x()"  />
    </HeaderTemplate>
    <ItemTemplate>
    <asp:CheckBox ID="cb1" runat="server"  onclick="y()"  />
    </ItemTemplate>
    </asp:TemplateField>
    </Columns>
    </asp:GridView>
    </center>
  
    </div>
    </form>
</body>
</html>


when the 'x' event will fire the page looks like

 
when the 'y' event will fire the page looks like
 





No comments:

Post a Comment