如何验证用户在 CheckBoxList 中选择了至少一个复选框？

Posted 2023-02-22

【中文标题】如何验证用户在 CheckBoxList 中选择了至少一个复选框？

【英文标题】：How to validate a user chose at least one checkbox in a CheckBoxList?

【发布时间】：2010-11-11 21:16:41

【问题描述】：

我有一个 CheckBoxList 控件，我想要求用户至少检查一个框，不管他们检查每一个，还是 3 个，甚至只检查一个。

本着 asp.net 验证控件的精神，我可以使用什么来强制执行此操作？我也在使用 Ajax 验证扩展器，所以如果它看起来像其他控件，而不是代码隐藏中的一些俗气的服务器验证方法，那就太好了。

<asp:CheckBoxList RepeatDirection="Horizontal" RepeatLayout="Table" RepeatColumns="3" ID="ckBoxListReasons" runat="server">
    <asp:ListItem Text="Preliminary Construction" Value="prelim_construction" />
    <asp:ListItem Text="Final Construction" Value="final_construction" />
    <asp:ListItem Text="Construction Alteration" Value="construction_alteration" />
    <asp:ListItem Text="Remodel" Value="remodel" />
    <asp:ListItem Text="Color" Value="color" />
    <asp:ListItem Text="Brick" Value="brick" />
    <asp:ListItem Text="Exterior Lighting" Value="exterior_lighting" />
    <asp:ListItem Text="Deck/Patio/Flatwork" Value="deck_patio_flatwork" />
    <asp:ListItem Text="Fence/Screening" Value="fence_screening" />
    <asp:ListItem Text="Landscape - Front" Value="landscape_front" />
    <asp:ListItem Text="Landscape - Side/Rear" Value="landscape_side_rear" />
    <asp:ListItem Text="Other" Value="other" />
</asp:CheckBoxList>

【问题讨论】：

你会用jQuery吗？如果是，那将非常简单。给你所有的复选框一个类名，比如“原因”。 $('.reasons :checked').length == 0 表示用户没有选中任何复选框，您可以显示错误。

我只想使用 .NET 中内置的验证器......我真的不会使用 jQuery。

【参考方案1】：

在服务器端做这个验证很容易，但我假设你想在客户端做这个？

JQuery 可以很容易地做到这一点，只要您拥有所有复选框控件共同用作选择器的东西，例如类（.NET 控件上的 CssClass）。您可以创建一个简单的JQuery 函数并将其连接到 ASP.NET 自定义验证器。请记住，如果您确实使用自定义验证器路由以确保您在服务器端检查它，以防 javascript 无法正常工作，您不会像其他 .NET 验证器那样获得免费的服务器端检查。

有关自定义验证器的更多信息，请查看以下链接：www.asp.net 和 MSDN

您不需要使用JQuery，它只是让 javascript 函数迭代并查看您所有的复选框控件更加容易，但如果您愿意，您可以使用 vanilla javascript。

这是我在以下位置找到的示例：Link to original

<asp:CheckBoxList ID="chkModuleList"runat="server" >
</asp:CheckBoxList>

<asp:CustomValidator runat="server" ID="cvmodulelist"
  ClientValidationFunction="ValidateModuleList"
  ErrorMessage="Please Select Atleast one Module" ></asp:CustomValidator>

// javascript to add to your aspx page
function ValidateModuleList(source, args)

  var chkListModules= document.getElementById ('<%= chkModuleList.ClientID %>');
  var chkListinputs = chkListModules.getElementsByTagName("input");
  for (var i=0;i<chkListinputs .length;i++)
  
    if (chkListinputs [i].checked)
    
      args.IsValid = true;
      return;
    
  
  args.IsValid = false;

旁注：JQuery 只是一个包含您需要添加到页面的小 js 文件。包含它后，您可以使用所有喜欢的JQuery。无需安装，我认为下一版本的 Visual Studio 将完全支持它。

【讨论】：

有什么可以概括的吗？如何修改 javascript 函数以使其采用 CustomValidator 中的“ControlToValidate”；而不是硬编码 "" ?

令人困惑的是，OP 在评论中说“我不能真正使用 jQuery”，而 然后 这个答案是假设相反的情况下发布的，更令人困惑的是 OP 接受了它。特别是如果在服务器端进行验证“很容易”（例如使用 C#），我想知道为什么这个答案不仅仅显示如何在服务器端进行验证。

【参考方案2】：

这是一个更简洁的 jQuery 实现，它允许一个 ClientValidationFunction 用于页面上任意数量的 CheckBoxList 控件：

function ValidateCheckBoxList(sender, args) 
    args.IsValid = false;

    $("#" + sender.id).parent().find("table[id$="+sender.ControlId+"]").find(":checkbox").each(function () 
        if ($(this).attr("checked")) 
        args.IsValid = true;
        return;
        
    );

这是标记：

<asp:CheckBoxList runat="server"
          Id="cblOptions" 
          DataTextField="Text" 
          DataValueField="Id" />

<xx:CustomValidator Display="Dynamic" 
              runat="server" 
              ID="cblOptionsValidator"
              ControlId="cblOptions"
              ClientValidationFunction="ValidateCheckBoxList" 
              ErrorMessage="One selection required." />

最后，允许客户端函数通过 ID 检索目标控件的自定义验证器：

public class CustomValidator : System.Web.UI.WebControls.CustomValidator

    public string ControlId  get; set; 

    protected override void OnLoad(EventArgs e)
    
        if (Enabled)
            Page.ClientScript.RegisterExpandoAttribute(ClientID, "ControlId", ControlId);

        base.OnLoad(e);
    

【讨论】：

不知道为什么，但是当 CheckBoxList 在更新面板内并且进行了部分回发时。即使在部分回发之前进行了选择，它也会出错。这是 JQuery 问题，接受作为答案的 JavaScript 解决方案在这种情况下有效..

+1 简洁的解决方案。当CheckBoxList 在FormView 中时，我无法接受答案。 @ArsalanAdamKhatri 要使用 UpdatePanel，请将 Page.ClientScript.RegisterExpandoAttribute(ClientID, "ControlId", ControlId); 替换为 ScriptManager.RegisterExpandoAttribute(this, ClientID, "ControlId", ControlId, true);

我很困惑你不能使用 sender.controltovalidate。结果你得到：Control 'x' referenced by the ControlToValidate property of 'valX' cannot be validated. 如果你尝试 - 即使你自己编写验证函数 - 所以当然它可以验证！

值得注意的是，此答​​案不适用于 RepeatLayout="UnorderedList" - 与接受的答案不同。

【参考方案3】：

您可以使用 CustomValidator 和一点 javascript。

<asp:CustomValidator ID="CustomValidator1" runat="server" ErrorMessage="Select at least one"
    ClientValidationFunction="checkCheckBoxList"></asp:CustomValidator>

<script type="text/javascript">
    function checkCheckBoxList(oSrc, args) 
        var isValid = false;
        $("#<%= CheckBoxList1.ClientID %> input[type='checkbox']:checked").each(function (i, obj) 
            isValid = true;
        );
        args.IsValid = isValid;
    
</script>

对于RadioButtonList

<asp:CustomValidator ID="CustomValidator1" runat="server" ErrorMessage="Select at least one" ClientValidationFunction="checkRadioButtonList"></asp:CustomValidator>

<script type="text/javascript">
    function checkRadioButtonList(oSrc, args) 
        if ($("input[name='<%= RadioButtonList1.UniqueID %>']:checked").val() == null) 
            args.IsValid = false;
         else 
            args.IsValid = true;
        
    
</script>

【参考方案4】：

这是另一个解决方案，可以通过 GitHub 上的Dado.Validators 考虑。

<asp:CheckBoxList ID="cblCheckBoxList" runat="server">
    <asp:ListItem Text="Check Box (empty)" Value="" />
    <asp:ListItem Text="Check Box 1" Value="1" />
    <asp:ListItem Text="Check Box 2" Value="2" />
    <asp:ListItem Text="Check Box 3" Value="3" />
</asp:CheckBoxList>

<Dado:RequiredFieldValidator runat="server" ControlToValidate="cblCheckBoxList" ValidationGroup="vlgSubmit" />

示例代码隐藏.aspx.cs

btnSubmit.Click += (a, b) =>

    Page.Validate("vlgSubmit");
    if (Page.IsValid) 
        // Validation Successful
    
;

https://www.nuget.org/packages/Dado.Validators/

参考：Check if a checkbox is checked in a group of checkboxes in clientside

【参考方案5】：

我们也可以通过 C# 实现这一点

 bool Item_selected = false;
        foreach (ListItem item in checkbox.Items)
        
            if (item.Selected == true)
            
                Item_selected = true;
            
        
        if (!Item_selected )
        
          //your message to user
          //  message = "Please select atleast one checkbox";
          
        

【参考方案6】：

循环遍历 ckBoxListReasons 中的每个项目。每个项目的类型都是“ListItem”。

ListItem 将有一个名为“Selected”的属性，它是一个布尔值。选择该项目时为真。比如：

Dim bolSelectionMade As Boolean = False
For Each item As ListItem in ckBoxListReasons.Items
 If item.Selected = True Then
  bolSelectionMade = True
 End If
Next

如果用户至少进行了一次选择，

bolSelectionMade 将设置为 true。然后，您可以使用它来设置您喜欢的任何特定验证器控件的有效状态。

【讨论】：

或者 C# 中更紧凑的形式是：args.IsValid = ckBoxListReasons.Items.Any(item => item.Selected);

您不能使用 .Any()，因为 Items 集合不是 IEnumerable 的后代——它是 ListItemCollection。

你可以使用 ckBoxListReasons.Items.Cast().Any(item => item.Selected);