Как проверить, что пользователь выбрал хотя бы один флажок в CheckBoxList?

У меня есть элемент управления 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>

7 ответов

Решение

Это легко сделать на стороне сервера проверки, но я предполагаю, что вы хотите сделать это на стороне клиента?

JQuery может сделать это очень легко, если у вас есть что-то общее, что есть у всех элементов управления флажков, которые можно использовать как селектор, например, класс (CssClass в вашем элементе управления.NET). Вы можете создать простую функцию JQuery и подключить ее к пользовательскому валидатору ASP.NET. Помните, что если вы идете по специальному пути валидатора, чтобы убедиться, что вы проверяете его на стороне сервера, а также в случае, если javascript не работает, вы не получите бесплатную проверку на стороне сервера, как и другие валидаторы.NET.

Для получения дополнительной информации о пользовательских валидаторах перейдите по следующим ссылкам: www.asp.net и MSDN

Вам не нужно использовать JQuery, он просто делает функцию javascript для итерации и просмотра всех ваших элементов управления флажками намного проще, но вы можете просто использовать vanilla javascript, если хотите.

Вот пример, который я нашел по адресу: Ссылка на оригинал

<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, я думаю.

Вот более чистая реализация 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." />

И наконец, пользовательский валидатор, который позволяет клиентской функции получать целевой элемент управления по идентификатору:

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);
    }
}

Проверьте эту статью от 4 парней из Ролла:

http://aspnet.4guysfromrolla.com/articles/092006-1.aspx

Они показывают, как создать валидатор для элементов управления CheckBox и CheckBoxList, который работает точно так же, как RequiredFieldValidator для других элементов управления.NET. Он имеет проверку на стороне сервера и проверку на стороне клиента. Приятно то, что вы можете указать группу ValidationGroup, и она будет работать с элементом управления ValidationSummary.

В нижней части статьи также есть ссылка для загрузки исходного кода и использования его в вашем проекте. Вы просто ссылаетесь на dll и регистрируете элементы управления, и все готово.

Вы можете использовать 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>

Вот еще одно решение, которое можно рассмотреть через Dado.Validators на GitHub.

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

Пример codebehind.aspx.cs

btnSubmit.Click += (a, b) =>
{
    Page.Validate("vlgSubmit");
    if (Page.IsValid) {
        // Validation Successful
    }
};

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

Ссылка: Проверьте, установлен ли флажок в группе флажков на стороне клиента.

Мы также можем добиться этого с помощью 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";
          
        }

Переберите все элементы в 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, если пользователь сделал хотя бы один выбор. Затем вы можете использовать это, чтобы установить допустимое состояние любого конкретного элемента управления валидатора, который вам нравится.

Надеюсь это поможет!

Ричард.

Другие вопросы по тегам