检查是否在客户端的一组复选框中选中了一个复选框

Question

请注意，该场景是 ASP.NET Webforms + Master - 内容页面会弄乱 id。
比如说，我有三个复选框

<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，因为我是按类名选择的。我可以通过在 class='company' 上使用 jQuery.each 来检查每个已检查标志。
有更好的想法吗？

Answer 1

您可以使用 CheckBoxList 和 Dado.Validators 轻松完成此操作，该 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" />

示例代码隐藏.aspx.cs

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

Dado.Validators 还有很多其他有用的功能值得一看。

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

Answer 2

您可以使用 :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>

您可能希望在这些复选框的容器上添加（或使用）一个 id，以优化选择器速度。

至于asp.net在控件上弄乱客户端ID，你可以使用

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

Answer 3

您可以等待所有复选框上的click 事件，然后在那里执行验证。不需要.each()。这样，您可以验证任何复选框已被选中或未选中。

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

你也可以稍微优化一下，然后根据你的需要进行更改。