Javascript uncheck checkboxs from Asp.net GridView

Question

I am using javascript to make unchecked GridView . But whenever I try, I cannot make unchecked it.

function UncheckedItemsCheckBox(CheckboxID) {
      var checkbox = document.getElementById(CheckboxID);
      checkbox.checked = false;            
      alert(checkbox.id + " : " + checkbox.name + " : " + checkbox.checked);
}

Here is the output.

---------------------------
Message from webpage
---------------------------
GridView1_ctl02_txtDoseQty : GridView1$ctl02$txtDoseQty : false
---------------------------
OK   
---------------------------

Even though "checkbox.checked" return me "false" as output message shown, but at the gridview checkbox is still checked.

Could anyone please give me suggestion?

Do you mean that the checkbox is visually still checked on the screen after running the javascript above, or are you saying that when you access the GridView in code on postback the checkbox still has a checked value? — patmortech
– patmortech, Commented Jan 7, 2012 at 5:37
your code works fine for all child checkboxes but if i uncheck a single checkbox in grid "header checkbox" it should be unchecked where and how to use ChildClick() function please help?? — user1237176
– user1237176, Commented Feb 28, 2012 at 8:32

Adam Rackis · Accepted Answer · 2012-01-07 06:29:54Z

What may be happening is that your CheckBoxID is wrong, and therefore returning the wrong element.

In JavaScript, saying checkbox.checked = false; will, if this object did not previously have a checked property, add one to the object, with the value provided. So, if your CheckBoxID is in fact wrong, it's no surprise your alert shows false; any non-null element you pull back with getElementById will allow you to add a checked property to it.

More specifically, in asp.net when you create a checkbox column, like this

<asp:CheckBoxField Text="Hello" DataField="foo" />

it renders html like this:

<span class="aspNetDisabled">
    <input id="gv_ctl00_0" type="checkbox" name="gv$ctl02$ctl00" disabled="disabled">
    <label for="gv_ctl00_0">Hello</label>
</span>

A couple possibilities:

The id you're getting may be of the span, on which you're adding a checked property.
~~You're setting the checkbox to be checked, but since it's disabled, it's not updating its state~~ -- ok, it looks like disabled checkboxes can have their checked properties updated. Hopefully #1 is your problem.

A good place to start debugging would be to change your function to this

function UncheckedItemsCheckBox(CheckboxID) {
      var checkbox = document.getElementById(CheckboxID);

      alert(checkbox.checked);  // <------- should display false, but will 
                                // display undefined if this element is 
                                // something other than a checkbox

      checkbox.checked = false;            
      alert(checkbox.id + " : " + checkbox.name + " : " + checkbox.checked);
}

Ram Mourya · Accepted Answer · 2012-08-13 12:38:58Z

2

Are you trying to check or uncheck the checkboxes in a GridView. If yes then you can try this simple code. Here we have the javascript function which will called , when the header checkbox is clicked

<script type="text/javascript">
    function Check_All(ChkBoxHeader)
    {
        //First Access the GridView Control
        var gridview = document.getElementById('<%=GridEmployees.ClientID %>');

        //Now get the all the Input type elements in the GridView
        var AllInputsElements = gridview.getElementsByTagName('input');
        var TotalInputs = AllInputsElements.length;
        //Now we have to find the checkboxes in the rows.
        for(var i=0;i< TotalInputs ; i++ )
        {
            if(AllInputsElements[i].type =='checkbox')
            {
                AllInputsElements[i].checked = ChkBoxHeader.checked;
            }
        }

    }

The GridView will look like this

<asp:GridView ID="GridView1" runat="server">
        <Columns>
            <asp:TemplateField>
                <ItemTemplate>
                    <asp:CheckBox ID="checkRecords" runat="server" />
                </ItemTemplate>
                <HeaderTemplate>
                    <asp:CheckBox ID="CheckHeader" runat="server" onclick="Check_All(this);" />
                </HeaderTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>

I hope that this will help you.

edited Aug 13, 2012 at 12:38

answered Jan 8, 2012 at 18:08

Ram Mourya

2,5884 gold badges19 silver badges25 bronze badges

1 Comment

Ralph Cristian P. Layog Over a year ago

Thank you very much! It works very great on my project.

Prince Antony G · Accepted Answer · 2012-01-07 05:42:46Z

Javascript for Check and uncheck the Checkboxes in gridView

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

     var TotalUnChkBx;
     var UnCounter;
     window.onload = function () {
         //Get total no. of CheckBoxes in side the GridView.
         TotalChkBx = parseInt('<%= this.GridView1.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.GridView1.ClientID %>');
         var TargetChildControl = "chkBxSelect";

         //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
         Counter = CheckBox.checked ? TotalChkBx : 0;
     }
     function ChildClick(CheckBox, HCheckBox) {
         //get target base & child 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>

In GridView

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false"  
    AlternatingRowStyle-BackColor="#006699"  
        AlternatingRowStyle-ForeColor="#FFFFFF" 
         >
    <Columns >
    <asp:TemplateField HeaderText="Select">
     <ItemTemplate>
      <asp:CheckBox ID="chkBxSelect" runat="server" />
      </ItemTemplate>
       <HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" Width="50px"  />
        <ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Width="50px"  />
         <HeaderTemplate>
        <asp:CheckBox ID="chkBxHeader" onclick="javascript:HeaderClick(this);" runat="server" />
         </HeaderTemplate>
        </asp:TemplateField> 
    <asp:TemplateField HeaderText="Serial Number">
   <ItemTemplate>
    <%# Container.DataItemIndex + 1 %>
   </ItemTemplate>
   </asp:TemplateField>
    <asp:BoundField HeaderText="Name" DataField="uname" />
    <asp:BoundField HeaderText="Pass" DataField="upass"/>
    </Columns>
    </asp:GridView>

Try this One

Neha · Accepted Answer · 2012-01-07 05:51:25Z

0

 $(document).ready(function () {                      
        $("#headercheck").click(function () {
            var ischecked;
            if (this.checked == true) {
                ischecked = true;
            }
            else {
                ischecked = false;
            }

            $('<%="#"+GridViewClass1.ClientID%> input:checkbox').attr('checked', $(this).is(':checked'))
        }); 

    });

headercheck is my chcekboxid. I have used something like this to check and uncheck the checkbox in my code. Hope it helps you.

answered Jan 7, 2012 at 5:51

Neha

3,0153 gold badges21 silver badges23 bronze badges

1 Comment

user57508 Over a year ago

shorthand: var ischecked = this.checked; ... and why tf are you doing this attr('checked', $(this).is(':checked'))? ... you already know the state in ischecked ... also this is not XHTMl-conform - either disabled="disabled" or disabled-poperty not existent

user3248363 · Accepted Answer · 2014-01-29 10:28:35Z

<script language="javascript" type="text/javascript">
    //        function Search()
    //        {
    //            alert("hi");
    //        }
    function SearchValidation() {
        var str = "";
        var flag;
        var count = 0;
        //                alert("Hi");'txtFirstName'
        if (document.getElementById('<%=ddlProjectName.ClientID%>').selectedIndex == 0) {
            str += "Select project name \n";
            flag = false;
            count++;
            //                alert(count);
        }
        if (document.getElementById('<%=ddlUsers.ClientID%>').selectedIndex == 0) {
            str += "Select project name \n";
            flag = false;
            count++;
        }
        if (document.getElementById('<%=ddlEmployee.ClientID%>').selectedIndex == 0) {
            str += "Select project name \n";
            flag = false;
            count++;
        }
        if (document.getElementById('<%=txtFromDate.ClientID%>').value == "") {
            str += "Enter Fromdate \n";
            flag = false;
            count++;
        }
        else {
            var input = document.getElementById('<%=txtFromDate.ClientID%>');

            var validformat = /\d{2}\/\d{2}\/\d{4}$/;

            if (!validformat.test(input.value)) {
                str += "Invalid Fromdate Format. Please correct and submit again. \n";
                flag = false;
            }
            else {
            }
        }

        if (document.getElementById('<%=txtToDate.ClientID%>').value == "") {
            str += "Enter Todate \n";
            flag = false;
            count++;
        }
        else {
            var inputTo = document.getElementById('<%=txtToDate.ClientID%>');

            var validTo = /\d{2}\/\d{2}\/\d{4}$/;

            if (!validTo.test(inputTo.value)) {
                str += "Invalid Todate Format. Please correct and submit again. \n";
                flag = false;
            }
            else {
            }
        }
        if (count == 5) {
            alert("Select any one search criteria.");
            return false;
        }
        else {
            return true;
        }
    }

    function ExportToExcelValidation() {
        var str = "";
        var flag;
        //    alert("Hi");'txtFirstName'
        if (document.getElementById('<%=ddlProjectName.ClientID%>').selectedIndex == 0) {
            str += "Select project name \n";
            flag = false;
        }

        if (document.getElementById('<%=txtFromDate.ClientID%>').value == "") {
            str += "Enter Fromdate \n";
            flag = false;
        }
        else {
            var input = document.getElementById('<%=txtFromDate.ClientID%>');

            var validformat = /\d{2}\/\d{2}\/\d{4}$/;

            if (!validformat.test(input.value)) {
                str += "Invalid Fromdate Format. Please correct and submit again. \n";
                flag = false;
            }

        }

        if (document.getElementById('<%=txtToDate.ClientID%>').value == "") {
            str += "Enter Todate \n";
            flag = false;
        }
        else {
            var inputTo = document.getElementById('<%=txtToDate.ClientID%>');

            var validTo = /\d{2}\/\d{2}\/\d{4}$/;

            if (!validTo.test(inputTo.value)) {
                str += "Invalid Todate Format. Please correct and submit again. \n";
                flag = false;
            }

        }
        if (flag == false) {
            alert(str);
            return flag;
        }
        else {
            return flag;
        }



    }

    function CheckValidation() {
        if (confirm("Are you sure you want to delete this  ?"))
            return true;
        else
            return false;
    }





    function CheckAll(oCheckbox) {
        var GridView2 = document.getElementById("<%=gvLeads.ClientID %>");
        for (i = 1; i < GridView2.rows.length; i++) {
            GridView2.rows[i].cells[0].getElementsByTagName("INPUT")[0].checked = oCheckbox.checked;
            //                alert(GridView2.rows[i].cells[0].getElementsByTagName("INPUT")[0]);
        }
    }
    function CheckIndividual(oCheck) {

        var GridView2 = document.getElementById("<%=gvLeads.ClientID %>");

        var checkedCount = 0;
        for (i = 1; i < GridView2.rows.length; i++) {


            if (GridView2.rows[i].cells[0].getElementsByTagName("INPUT")[0].checked == true) {
                checkedCount++;
            }


        }
        if (checkedCount == GridView2.rows.length - 1) {
            GridView2.rows[0].cells[0].getElementsByTagName("INPUT")[0].checked = oCheck.checked;
        }
        else {
            GridView2.rows[0].cells[0].getElementsByTagName("INPUT")[0].checked = false;
        }

    }
</script>

<%----%> <%-- --%> ' runat="server" Visible="false" /> ' runat="server" Visible="false" /> ' runat="server" Visible="false" /> <%--onclick="fnCheckAll(this);"--%> <%-- ' runat="server" Visible="false"/>

                                        </ItemTemplate>
                                    </asp:TemplateField>--%>
                                <%-- <asp:TemplateField HeaderText="Project Id">
                                        <ItemTemplate>
                                            <asp:Label ID="lblProjectId" Text='<%#Eval("ProjectId") %>' runat="server"  Visible="false"/>

                                        </ItemTemplate>
                                    </asp:TemplateField>--%>
                                <asp:TemplateField HeaderText="Project Name">
                                    <ItemTemplate>
                                        <asp:Label ID="lblProjectName" Text='<%#Eval("ProjectName") %>' runat="server" />
                                    </ItemTemplate>
                                </asp:TemplateField>
                                <asp:TemplateField HeaderText="Lead Name">
                                    <ItemTemplate>
                                        <asp:Label ID="lblLeadName" Text='<%#Eval("LeadName") %>' runat="server" />
                                    </ItemTemplate>
                                </asp:TemplateField>
                                <asp:TemplateField HeaderText="Employee Name">
                                    <ItemTemplate>
                                        <asp:Label ID="lblEmployeeName" Text='<%#Eval("EmployeeName") %>' runat="server" />
                                    </ItemTemplate>
                                </asp:TemplateField>
                                <%-- <asp:TemplateField HeaderText="Lead Id">
                                        <ItemTemplate>
                                            <asp:Label ID="lblAddedUserName" Text='<%#Eval("LeadId") %>' runat="server" Visible="false"/>

                                        </ItemTemplate>
                                    </asp:TemplateField>--%>
                                <asp:TemplateField HeaderText="From Date">
                                    <ItemTemplate>
                                        <asp:Label ID="lblFromDate" Text='<%#Eval("FromDate") %>' runat="server" />
                                    </ItemTemplate>
                                </asp:TemplateField>
                                <asp:TemplateField HeaderText="To Date">
                                    <ItemTemplate>
                                        <asp:Label ID="lblToDate" Text='<%#Eval("ToDate") %>' runat="server" />
                                    </ItemTemplate>
                                </asp:TemplateField>
                                <asp:TemplateField HeaderText="Added UserName">
                                    <ItemTemplate>
                                        <asp:Label ID="lblCreatedBy" Text='<%#Eval("CreatedBy") %>' runat="server" />
                                    </ItemTemplate>
                                </asp:TemplateField>
                                <asp:TemplateField HeaderText="Created Date">
                                    <ItemTemplate>
                                        <asp:Label ID="lblCreatedDate" Text='<%#Eval("CreatedDate") %>' runat="server" />
                                    </ItemTemplate>
                                </asp:TemplateField>
                                <%--<asp:TemplateField HeaderText="Edit">
                                    <ItemTemplate>
                                        <asp:Label ID="lblLeadId" Text='<%#Eval("LeadId") %>' runat="server" Visible="false" />
                                        <asp:Label ID="lblProjectId" Text='<%#Eval("ProjectId") %>' runat="server" Visible="false" />
                                        <asp:Label ID="lblEmployeeId" Text='<%#Eval("EmployeeId") %>' runat="server" Visible="false" />
                                        <asp:Label ID="lblEdit" Text='<%#Eval("Id") %>' runat="server" Visible="false" />
                                        <asp:Button ID="btnEdit" runat="server" Text="Edit" />
                                    </ItemTemplate>
                                </asp:TemplateField>
                                <asp:TemplateField HeaderText="Delete">
                                    <ItemTemplate>
                                        <asp:Label ID="lblDelete" Text='<%#Eval("Id") %>' runat="server" Visible="false" />
                                        <asp:Button ID="btnDelete" runat="server" Text="Delete" OnClientClick="if(!CheckValidation())return false;" />
                                    </ItemTemplate>
                                </asp:TemplateField>--%>
                            </Columns>
                            <FooterStyle BackColor="#FFFFCC" ForeColor="#330099" />
                            <HeaderStyle BackColor="#9966FF" Font-Bold="True" ForeColor="#FFFFCC" />
                            <PagerStyle BackColor="#FFFFCC" ForeColor="#330099" HorizontalAlign="Center" />
                            <RowStyle BackColor="White" ForeColor="#330099" BorderColor="#0066CC" Font-Bold="False" />
                            <SelectedRowStyle BackColor="#FFCC66" Font-Bold="False" ForeColor="#663399" />
                            <SortedAscendingCellStyle BackColor="#FEFCEB" />
                            <SortedAscendingHeaderStyle BackColor="#AF0101" />
                            <SortedDescendingCellStyle BackColor="#F6F0C0" />
                            <SortedDescendingHeaderStyle BackColor="#7E0000" />
                        </asp:GridView>

Collectives™ on Stack Overflow

Javascript uncheck checkboxs from Asp.net GridView

5 Answers 5

Comments

1 Comment

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

1 Comment

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related