c# - Javascript uncheck checkboxs from Asp.net GridView - Stack Overflow

admin管理员组

文章数量:1393035

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?

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?

• c#
• javascript
• asp
• dom
• gridview

Share Improve this question Follow asked Jan 7, 2012 at 5:30 Frank Myat ThuFrank Myat Thu 4,47499 gold badges7070 silver badges114114 bronze badges 2

• 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 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 Commented Feb 28, 2012 at 8:32

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 2

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 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:

1. The id you're getting may be of the span, on which you're adding a checked property.
2. 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);
}

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.

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

 $(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.

<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>

本文标签： cJavascript uncheck checkboxs from Aspnet GridViewStack Overflow