如何在 gridview 中验证此复选框？

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

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

更多关于如何使用 document.querySelectorAll() 通过部分名称选择控件的信息可以在here 找到。您也可以随时使用 jQuery 进行这些类型的选择。