Javascript取消选中Asp.net GridView的复选框

时间:2012-01-07 05:30:55

标签: c# javascript asp.net dom gridview

我正在使用javascript来制作未经检查的GridView。 但每当我尝试时,我都无法取消它。

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

这是输出。

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

即使“checkbox.checked”返回“false”作为输出消息显示,但仍然检查gridview复选框。

有人可以给我一些建议吗?

5 个答案:

答案 0 :(得分:2)

可能发生的事情是你的CheckBoxID错了,因此返回了错误的元素。

在JavaScript中,如果此对象以前没有checkbox.checked = false;属性,则添加一个,并提供值。因此,如果您的checked实际上是错误的,那么您的警报显示错误就不足为奇了;使用CheckBoxID拉回的任何非null元素都允许您向其添加checked属性。

更具体地说,在getElementById创建复选框列时,就像这样

asp.net

它呈现这样的HTML:

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

有几种可能性:

  1. 您获得的ID可能是您要添加已检查属性的范围。
  2. 您正在设置要选中的复选框,但由于它已被禁用,因此它不会更新其状态 - 好吧,看起来禁用复选框可以更新其选中的属性。希望#1是你的问题。
  3. 开始调试的好地方是将您的功能更改为

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

答案 1 :(得分: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 :(得分:0)

Javascript for Check并取消选中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>

试一下

答案 3 :(得分: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。 我使用过这样的东西来检查和取消选中我代码中的复选框。希望它可以帮到你。

答案 4 :(得分: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>

                                                                                                                                                           &LT;%----%GT;                                                                                                                                                                                                                         &lt;% - - %&gt;                                             &#39; RUNAT =&#34;服务器&#34;可见=#&34;假&#34; /&GT;                                             &#39; RUNAT =&#34;服务器&#34;可见=#&34;假&#34; /&GT;                                             &#39; RUNAT =&#34;服务器&#34;可见=#&34;假&#34; /&GT;                                                                                                                                                            &LT;% - 的onclick =&#34; fnCheckAll(本);&#34; - %GT;                                     &LT;% -                                                                                              &#39; RUNAT =&#34;服务器&#34;可见=&#34;假&#34; /&GT;

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