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

Question

Обратите внимание, что сценарий ASP.NET Webforms + Master - страница содержимого, которая испортила идентификаторы.
У меня есть, скажем, три флажка

<asp:CheckBox ID="chkConsultantQuality" runat="server" 
            CssClass="company"/>
<asp:CheckBox ID="chkConsultantEnvironment" runat="server" 
            CssClass="company"/>
<asp:CheckBox ID="chkConsultantSafety" runat="server" 
            CssClass="company"/>

Я хотел бы сделать div id="CompanyPanel" при щелчке каждого флажка в соответствии со следующим условием

1. отображается, если установлены какие-либо флажки.
2. скрыто, если все флажки сняты.

Я планирую использовать JQuery, так как я выбираю по имени класса. Я мог бы сделать это с jQuery.each в классе = "компания", проверяя каждый на наличие флажка.
Есть идеи получше?

Answer 1

E сть :checked ( http://api.jquery.com/checked-selector/) селектор, который вы можете использовать:

<script>
    $(document).ready(function() {
        $(".company input").click(function() {
            var cnt = $(".company input:checked").length;

            if( cnt == 0)
            {
               // none checked
               $('#CompanyPanel').hide();
            }
            else
            {
               // any checked
               $('#CompanyPanel').show();
            }
        });
    });
</script>

Вы можете добавить (или использовать) идентификатор на контейнер с этим флажком, чтобы оптимизировать скорость селектора.

Что касается asp.net испорченных идентификаторов клиентов на элементах управления, вы можете использовать

$('<% =MyControl.ClientID %>')

Answer 2

Вы можете просто подождать click событие на всех флажках, и выполнить проверку там. Нет необходимости .each(), Таким образом, вы проверяете всякий раз, когда какой-либо из флажков был отмечен или снят.

$('input.company:checkbox').click(function(){
    if ($('input.company:checkbox:checked').length > 0)
    {
        $('div#CompanyPanel').show();
    }
    else 
    {
        $('div#CompanyPanel').hide();
    }
});

Вы можете просто немного его оптимизировать и изменять в соответствии с вашими потребностями.

Answer 3

Вы можете сделать это очень легко с CheckBoxList и Dado.Validators, который обеспечивает поддержку CheckBoxLists. Обратите внимание, что это обеспечивает проверку на стороне клиента и на стороне сервера.

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

Есть много других полезных функций в Dado.Validators, которые стоит посмотреть.

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