Java从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?

Answer 1

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:

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

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

Answer 3

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

Answer 4

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

Answer 5

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