如何验证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

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

有关如何使用document.querySelectorAll（）通过其部分名称选择控件的更多信息，请参见此处 。 您也可以始终将jQuery用于这些类型的选择。