Check if a checkbox is checked in a group of checkboxes in clientside

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?

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 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 %>')

Method 2

You can just wait for the click event on all checkboxes, and perform your validation there. No need for .each(). This way, you validate whenever any of the checkboxes have been checked or unchecked.

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

You can just optimize it a bit as well, and change according to your needs.

Method 3

You could do this very easily with a CheckBoxList and a Dado.Validators which provides support for CheckBoxLists. Note this provides client-side and server-side validation.

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

Example codebehind.aspx.cs

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

There are many other useful feature in Dado.Validators worth a look-see.

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

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0