如何验证用户在 CheckBoxList 中至少选择了一个复选框? [英] How to validate a user chose at least one checkbox in a CheckBoxList?

问题描述

我有一个 CheckBoxList 控件，我想要求用户至少检查一个框，他们是否检查每个框，或 3 个，甚至只检查一个都没有关系.

I've got a CheckBoxList control that I want to require the user to check at least ONE box, it does not matter if they check every single one, or 3, or even just one.

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

In the spirit of asp.net's validation controls, what can I use to enforce this? I'm also using the Ajax validation extender, so it would be nice if it could look like other controls, and not some cheesy server validate method in the codebehind.

<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>

推荐答案

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

It's easy to do this validation server side, but I am assuming you want to do it client side?

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

JQuery can do this very easily as long as you have something that all checkbox controls have in common to use as a selector such as class (CssClass on your .NET control). You can make a simple JQuery function and connect it to a ASP.NET custom validator. Remember if you do go the custom validator route to make sure you check it server side as well in case javascript is not working, you don't get a free server side check like the other .NET validators.

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

For more information on custom validators check out the following links: www.asp.net and MSDN

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

You don't need to use JQuery, it just makes the javascript function to iterate and look at all your checkbox controls much easier but you can just use vanilla javascript if you like.

这是我在以下位置找到的示例:原始链接

Here is an example I found at: 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 将完全支持它.

Side Note: JQuery is just a little js file include you need to add to your page. Once you have it included you can use all the JQuery you like. Nothing to install and it will be full supported in the next version of Visual Studio I think.

这篇关于如何验证用户在 CheckBoxList 中至少选择了一个复选框?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！