Question

Please note that the scenario is ASP.NET Webforms + Master – Content page which mess up the ids.
I have, say, three checkboxes

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

I would like to make a div id="CompanyPanel" on click event of each checkbox according to the following condition

1. visible if any of the checkboxes are checked.
2. hidden if all of the checkboxes are unchecked.

I am planning to use jQuery since I am selecting by class name. I could do it with jQuery.each on the class=’company’ by checking each for a checked flag.
Any better ideas?

Answer 1

There is a :checked ( http://api.jquery.com/checked-selector/ ) selector you can use :

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

You may want to add (or use) an id on the container of these checkbox, to optimize selector speed.

As for asp.net messing up client ids on controls, you can use

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