如何验证转发器中的所有复选框都已选中

Question

我有一个表单，它从数据库中提取所需的协议文本，并将每个活动的协议条款显示为转发器中的单独复选框。在提交表单之前，我需要验证转发器中的所有复选框都已选中。有没有办法做到这一点，或者我应该以与下面开始的方式不同的方式来完成它？

目前，我有一个 CustomValidator，但它只需要至少选中一个复选框。

<h1>Agreements</h1>

        <asp:Repeater ID="rptAgreements" runat="server">

            <HeaderTemplate>

                <table>

            </HeaderTemplate>

            <ItemTemplate>

                <tr>

                    <td valign="top" style="padding:10px;">

                        <asp:CustomValidator ID="CustomValidator1" runat="server" ErrorMessage="*" ClientValidationFunction = "ValidateCheckBox"></asp:CustomValidator>

                        <asp:CheckBox ID="Agreements" value='<%# Eval("AgreementID") %>' runat="server" ClientIDMode="Static" />

                    </td>

                    <td style="padding:10px;">

                        <asp:Label ID="lblAgreementText" runat="server" Text='<%# Eval("AgreementText") %>' />

                    </td>

                </tr>

            </ItemTemplate>

            <FooterTemplate>

                </table>

            </FooterTemplate>

        </asp:Repeater>

<script type = "text/javascript">

    function ValidateCheckBox(sender, args) {

        if (document.getElementById("Agreements").checked == true) {

            args.IsValid = true;

        } else {

            args.IsValid = false;

        }

    }

</script> 

背后的代码：

try

    {

        using (SqlConnection con = new SqlConnection(FormConnstring))

        {

            using (SqlCommand cmd = new SqlCommand("sp_SelectAgreements", con))

            {

                using (SqlDataAdapter agreeDS = new SqlDataAdapter(cmd))

                {

                    cmd.CommandType = CommandType.StoredProcedure;

                    DataTable dt = new DataTable();

                    agreeDS.Fill(dt);

                    rptAgreements.DataSource = dt;

                    rptAgreements.DataBind();

                }

            }

        }

    }

Answer 1

您可以使用一个类并根据您的目的使用单个 customValidator。因此，您的代码将如下所示。<h1>Agreements</h1>&nbsp; &nbsp; <asp:CustomValidator ID="CustomValidator1" runat="server" ErrorMessage="*" ClientValidationFunction = "ValidateCheckBoxes"></asp:CustomValidator>&nbsp; &nbsp; <asp:Repeater ID="rptAgreements" runat="server">&nbsp; &nbsp; &nbsp; &nbsp; <HeaderTemplate>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <table>&nbsp; &nbsp; &nbsp; &nbsp; </HeaderTemplate>&nbsp; &nbsp; &nbsp; &nbsp; <ItemTemplate>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td valign="top" style="padding:10px;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <asp:CheckBox ID="Agreements" value='<%# Eval("AgreementID") %>' runat="server" ClientIDMode="Static" CssClass="Agreement"/>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td style="padding:10px;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <asp:Label ID="lblAgreementText" runat="server" Text='<%# Eval("AgreementText") %>' />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; &nbsp; </ItemTemplate>&nbsp; &nbsp; &nbsp; &nbsp; <FooterTemplate>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </table>&nbsp; &nbsp; &nbsp; &nbsp; </FooterTemplate>&nbsp; &nbsp; </asp:Repeater><script type = "text/javascript">function ValidateCheckBoxes(sender, args) {&nbsp; &nbsp; if ($('input.Agreement').not(':checked').length == 0) {&nbsp; &nbsp; &nbsp; &nbsp; args.IsValid = true;&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; args.IsValid = false;&nbsp; &nbsp; }}

Answer 2

您在代码中分配 ClientIDMode="Static" 将在 Html 中生成重复的 Id，并且它不是有效的 html。您可以为复选框分配类，并在 JS 中计算协议复选框和选定的复选框，然后您可以比较数字。如波纹管：<input type="checkbox" class="agreement" value="1"> agreement 1<input type="checkbox" class="agreement" value="2"> agreement 2<input type="checkbox" class="agreement" value="3"> agreement 3<input type="checkbox" class="agreement" value="4"> agreement 4<input type="submit" value="GO" id="btn" />$('#btn').click(function(){&nbsp; var chkAll=$('input.agreement').length;&nbsp; var chkSelected = $('input.agreement:checked').length;&nbsp; alert(chkAll==chkSelected);});