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

Question

请注意,该场景是ASP.NET Webforms + Master - Content页面,它会弄乱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,因为我按类名选择.我可以jQuery.each通过检查每个检查标志来在class ='company'上执行此操作.
有更好的想法吗？

Answer 1

有一个: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 2

您可以click在所有复选框上等待事件,并在那里执行验证.没必要.each().这样,只要选中或取消选中任何复选框,就会进行验证.

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

您也可以稍微优化它,并根据您的需要进行更改.