Make sure at least 1 checkbox is checked for multiple groups of checkboxes?

Question

I have several groups of checkboxes (each with several checkboxes), and I need to use jQuery (or plain old javascript) to make sure that the form can't submit unless at least 1 checkbox from each group of checkboxes is checked. How can I do this? If Group A doesn't have at least one, I'd like to throw an error specifying "please select at least one from Group A", etc etc. Thanks!

Answer 1

You could handle this by defining a CSS class to "group" each of your sets of checkbox elements and then process each group to see if at least one of the elements is checked and alert the user accordingly.

Some example markup might look like the following :

<form>
    <pre>Group A</pre>
    <input class='group-a' data-name='Group A' type='checkbox' value='1' /> 1
    <input class='group-a' data-name='Group A' type='checkbox' value='2' /> 2
    <pre>Group B</pre>
    <input class='group-b' data-name='Group B' type='checkbox' value='1' /> 1
    <input class='group-b' data-name='Group B' type='checkbox' value='2' /> 2
    <pre>Group C</pre>
    <input class='group-c' data-name='Group C' type='checkbox' value='1' /> 1
    <input class='group-c' data-name='Group C' type='checkbox' value='2' /> 2
    <hr />
    <input type='submit' />
  </form>

Along with the following bit of jQuery that will handle your actual logic :

<script>
    $(function(){
        $('form').submit(function(e){
           // Store each group that has been processed
            var checkedGroups = [];
            // Check each group 
            $(':checkbox[class^="group-"]').each(function(){
                // Store a reference to the current class
                var currentGroup = $(this).attr('class');
                // If the current group hasn't been checked, check it
                if($.inArray(currentGroup,checkedGroups) == -1){
                    var atLeastOneChecked = $(':checkbox.' + currentGroup + ':checked').length > 0;
                    // If at least one isn't checked, alert the user
                    if(!atLeastOneChecked){
                        // Alert the user and stop everything going forward
                        alert("Please ensure that at least one option from " + $(this).data('name') + " is checked.");
                        e.preventDefault();
                        return false;
                    }
                    // If we have made it this far, then this group has been checked
                    checkedGroups.push(currentGroup);
                }      
            });
        });
    });
  </script>

You don't necessarily have to use CSS classes to handle the selection. You could easily use data-* attributes to handle that as well, so it's just up to your personal preference.

You can see an example of this code in action here .