Geek Answers Handbook

Javascript uncheck checkboxes with Asp.net GridView

I am using javascript to create an uncontrolled gridview. But whenever I try, I can't stop him.

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

Here is the result.

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

Even though "checkbox.checked" returns me "false" as the output message, but on the checkbox the gridview is still checked.

Can someone please give me a suggestion?

0
source share
5 answers

What can happen is that yours CheckBoxIDis erroneous and therefore returns the wrong element.

JavaScript, checkbox.checked = false;, , checked, . , CheckBoxID , , false; , getElementById, .

, asp.net , ,

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

html :

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

:

  • , , , .
  • , , - ok, , . , №1 - .

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);
}
+2

GridView. , . javascript, ,

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

    }

GridView

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

, .

+2

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

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>

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 - chcekboxid. - , . , .

0
<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 ();" -% >                                   <% -                                                                                          '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>
0
source

More articles:


All Articles