popup alert on selecting a checkbox

[Dkaur]

I want to display a Popup alert if select all checkbox is selected and number of rows in the grid are more than the number of check boxes selected. This code does that but it does on the second click on the select all check box, not on the first click. Please suggest correction:

<script type="text/javascript">
    var TotalChkBx;
    var Counter;

    window.onload = function () {
        //Get total no. of CheckBoxes in side the GridView.
        TotalChkBx = parseInt('<%= this.gvConcurrentCases.Rows.Count %>');

        //Get total no. of checked CheckBoxes in side the GridView.
        Counter = 0;
    }

    function HeaderClick(CheckBox) {
        //Get target base & child control.
        var TargetBaseControl =
       document.getElementById('<%= this.gvConcurrentCases.ClientID %>');
        var TargetChildControl = "CheckBoxMerge";

        //Get all the control of the type INPUT in the base control.
        var Inputs = TargetBaseControl.getElementsByTagName("input");

        //Checked/Unchecked all the checkBoxes in side the GridView.
        for (var n = 0; n < Inputs.length; ++n)
            if (Inputs[n].type == 'checkbox' &&
                Inputs[n].id.indexOf(TargetChildControl, 0) >= 0)
                Inputs[n].checked = CheckBox.checked;
       if (Counter < parseInt('<%= this.gvConcurrentCases.Rows.Count %>'))
          alert('All concurrent cases have not been signed out.')     
        
         
        //Reset Counter
        Counter = CheckBox.checked ? TotalChkBx : 0;
        
    }

[Sterling Isfine]

First please confirm the event you are using to detect the checkbox?

It needs to be onclick not onchange.

[Dkaur]

I am using onclick.

<asp:GridView ID="gvConcurrentCases" runat="server"
            EmptyDataText="No Concurrent cases Found"  
        AutoGenerateColumns="False" EnableViewState = "true" HeaderStyle-Height = "20" RowStyle-Height = "20">
        <Columns>
         <asp:TemplateField ItemStyle-HorizontalAlign ="Center" ItemStyle-VerticalAlign = "Middle" >
                <ItemTemplate  >
                        <asp:CheckBox ID="CheckBoxMerge" runat="server" Enabled="true"  />
                </ItemTemplate>                
                <HeaderStyle HorizontalAlign="Right" VerticalAlign="Middle" />
                <HeaderTemplate >
                    <asp:CheckBox ID="chkBxHeader" onclick="javascript:HeaderClick(this);" runat="server" />
                </HeaderTemplate>
            </asp:TemplateField>
        <asp:TemplateField HeaderText="Case No.">
                <ItemTemplate >
                <asp:Label ID="LblCaseNo" runat="server" Text='<&#37;# Eval("CaseNo") %>' visible="false"></asp:Label>  
              <a class="link_Concurrent" href='details.aspx?caseno=<%# Eval("CaseNo") %>&ai=<%# Request.QueryString["ai"] %>&pi=<%# Request.QueryString["pi"] %>&ci=<%# Request.QueryString["ci"] %>'>
                <%# Eval("CaseNo") %>
                </a>
                </ItemTemplate>
        </asp:TemplateField>
        <asp:BoundField HeaderText="Case Type" DataField="CaseTypeName"/>
        <asp:TemplateField HeaderText="Accession Date" ItemStyle-Height = "20">
            <ItemTemplate>
                <%# completedDateAndStep(DataBinder.Eval(Container.DataItem, "CreatedDate").ToString(), Eval("StepName").ToString())%>
            </ItemTemplate>
        </asp:TemplateField><asp:TemplateField HeaderText="Completed Date">
            <ItemTemplate>
                <%# completedDateAndStep(DataBinder.Eval(Container.DataItem, "CompletedDate").ToString(), Eval("StepName").ToString())%>
                <asp:Label ID="CompletedStatus" runat="server" Text='<%# Eval("StepName") %>' visible="false"></asp:Label>  
            </ItemTemplate>
        </asp:TemplateField>        
        <asp:TemplateField HeaderText="Note">
            <ItemTemplate>
            
            </ItemTemplate>
        </asp:TemplateField>
        
        </Columns>
        </asp:GridView>       

    <asp:Label ID="Label1" runat="server" ></asp:Label><br />
    <asp:Button ID="MergeReports" runat="server" Text="Batch Save Reports" OnClick="MergeReportFiles" />

[Sterling Isfine]

Try an alert as the first statement inside HeaderClick, then you'll know if it's actually being called the first time.
If it isn't, try removing the javascript: in the onclick handler.

[Dkaur]

This javascript code gives me the alert when I click on the header checkbox to select all. What can I change to get this alert only if header check box is clicked to check and not when it is clicked to uncheck.

Thanks.

<script type="text/javascript">
    var TotalChkBx;
    var Counter;
    var ctrChecked;

    window.onload = function () {
        //Get total no. of CheckBoxes in side the GridView.
        TotalChkBx = parseInt('<%= this.gvConcurrentCases.Rows.Count %>');

        //Get total no. of checked CheckBoxes in side the GridView.
        Counter = 0;
        ctrChecked = (parseInt('<%= this.Label1.Text %>'));
    }

    function HeaderClick(CheckBox) {
        //Get target base & child control.
        var TargetBaseControl =
       document.getElementById('<%= this.gvConcurrentCases.ClientID %>');
        var TargetChildControl = "CheckBoxMerge";

        //Get all the control of the type INPUT in the base control.
        var Inputs = TargetBaseControl.getElementsByTagName("input");

        //Checked/Unchecked all the checkBoxes in side the GridView.
        for (var n = 0; n < Inputs.length; ++n)
            if (Inputs[n].type == 'checkbox' &&
                Inputs[n].id.indexOf(TargetChildControl, 0) >= 0) {
                Inputs[n].checked = CheckBox.checked; 
            }
            //Reset Counter
            //alert('ctrChecked' + ctrChecked + '   Row# = ' + (parseInt('<%= this.gvConcurrentCases.Rows.Count %>')));

            if (ctrChecked < (parseInt('<%= this.gvConcurrentCases.Rows.Count %>')))
                alert('All concurrent cases have not been signed out.');                
        Counter = CheckBox.checked ? TotalChkBx : 0;
    }

    function ChildClick(CheckBox, HCheckBox) {
        //get target control.
        var HeaderCheckBox = document.getElementById(HCheckBox);

        //Modifiy Counter; 
        if (CheckBox.checked && Counter < TotalChkBx)
            Counter++;
        else if (Counter > 0)
            Counter--;

        //Change state of the header CheckBox.
        if (Counter < TotalChkBx)
            HeaderCheckBox.checked = false;
        else if (Counter == TotalChkBx)
            HeaderCheckBox.checked = true;
    }
</script>

 <asp:GridView ID="gvConcurrentCases" runat="server"
            EmptyDataText="No Concurrent cases Found"   
        AutoGenerateColumns="False" EnableViewState = "true"  HeaderStyle-Height = "20" RowStyle-Height = "20"
        RowStyle-CssClass = '<% Eval("CaseNo") == pt_caseNo.Text. ? "css_Blue" : "css_White"  %>'>
        <Columns>
         <asp:TemplateField >
                <ItemTemplate >
                        <asp:CheckBox ID="CheckBoxMerge" runat="server" Enabled="true" />
                </ItemTemplate>
                <HeaderStyle HorizontalAlign="Right" VerticalAlign="Middle" />
                <HeaderTemplate >
                    [B]<asp:CheckBox ID="chkBxHeader" onclick="javascript:HeaderClick(this);" runat="server" />[/B]
                </HeaderTemplate>
            </asp:TemplateField>