Question

我已经看过很多关于如何在gridview中验证复选框的示例，但到目前为止似乎没有一个对我有效。

我的代码带有gridview外的复选框：

   <table>
<tr>
    <td>
        <asp:CheckBox ID="grid1Details" ClientIDMode="Static" runat="server" Checked="false" AutoPostBack="true" OnCheckedChanged="Grid1CheckChanged" /><span style="color:#ff0000">*</span>
    </td>
    <td>
      <asp:gridview ID="Gridview1" gridlines="None" runat="server" ShowFooter="true" AutoGenerateColumns="false" onrowdatabound="Gridview1_RowDataBound" OnRowDeleting="Gridview1_RowDeleting">
        <Columns>
        <asp:BoundField DataField="RowNumber" Visible="false" HeaderText="Row Number" />
        <asp:TemplateField HeaderText="Name">
         <headerstyle horizontalalign="Left" />
            <ItemTemplate>
                <asp:TextBox ID="txtsourcename" placeholder="Name...(e.g, Jane Doe)" runat="server" style="width:250px;" class="form-control"></asp:TextBox>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Address">
        <ItemStyle HorizontalAlign="Left"></ItemStyle>
            <ItemTemplate>
                <asp:TextBox ID="txtsourceaddress" placeholder="Address..." runat="server" style="width:250px;" class="form-control"></asp:TextBox>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Income">
        <ItemStyle HorizontalAlign="Left"></ItemStyle>
            <ItemTemplate>
                 <asp:TextBox ID="txtsourceincome" placeholder="Income...(example: 1000)" runat="server" style="width:250px;" class="form-control txtsourceincome numeric"></asp:TextBox>
            </ItemTemplate>
                   </asp:TemplateField>
        <asp:TemplateField HeaderText="">
            <ItemTemplate>
             <asp:Button ID="ButtonAdd" runat="server" Text="Add" 
                    onclick="ButtonAdd_Click" CssClass="grvAddButton" OnClientClick="return ValidateEmptyValue();return validate()" />
            </ItemTemplate>
        </asp:TemplateField>
       <asp:CommandField ShowDeleteButton="True"><ControlStyle CssClass="grvDelButton" /></asp:CommandField>
        </Columns>
      </asp:gridview>
    </td>
</tr>

//JS:
<script type="text/javascript">
    function validate() {

        //employee check
        var checkbox = document.getElementById("<%=grid1Details.ClientID %>");
        var txtsourcename = $("[id*='txtsourcename']")[0];
        var txtsourceaddress = $("[id*='txtsourceaddress']")[0];
        var txtsourceincome = $("[id*='txtsourceincome']")[0];


        if (checkbox.checked) {
            if ($(txtsourcename).val().length != 0 && $(txtsourceaddress).val().length != 0 && $(txtsourceincome).val().length != 0) {
                Alert("Please enter values on all textboxes or check the checkbox next to each textbox.");
                return false;
            } else {
                return true;
            }
        } else {
            if ($(txtsourcename).val().length != 0 && $(txtsourceaddress).val().length != 0 && $(txtsourceincome).val().length != 0) {
                return true;
            } else {
                Alert("Please enter values on all textboxes or check the checkbox next to each textbox.");
                return false;
            }
        }
    }
   </script>

用户需要在GridView1内的文本框中输入值。

如果用户选择将文本框留空，他/她必须勾选复选框以继续。

这很有效，直到管理层决定在gridview中移动复选框并将其放在名称...文本框下面。

我无法验证这一点。

对javascript进行以下更改：

 var checkbox = document.getElementById("grid1Details");
 var txtsourcename = $("[id*='txtsourcename']")[0];
 var txtsourceaddress = $("[id*='txtsourceaddress']")[0];
 var txtsourceincome = $("[id*='txtsourceincome']")[0];

验证不再有效。即使文本框是空白的，无论是否勾选复选框，单击提交按钮后，都会提交数据。

任何想法我做错了什么？

上面的屏幕截图显示了两个图像，图像1，过去的样子和图像2，管理层希望它的样子。

Answer 1

您是否看过gridview中控件的RENDERED名称？因为在WebForms中，当您实际运行页面时，元素的名称将来自服务器。您必须使用浏览器的开发人员工具查找控件的真实名称，然后使用document.querySelectorAll（），根据名称的一部分而不是呈现的名称选择控件。

有关如何使用document.querySelectorAll（）通过它的部分名称选择控件的更多信息可以找到here。您也可以始终使用jQuery进行这些类型的选择。

如何在gridview中验证此Checkbox？

1 个答案: