Making at least one checkbox required
I'd probably verify the correct amount of checkboxes by iterating over them when verifying. This can get tricky in case your layout is complex, but you should usually be able to find a solution to this.

Since I liked the initial idea (I always try to avoid doing such checks or just do them server side), here's a fiddle I came up with. Just keep in mind that this code is barely optimized, complete or clean. It's just some quick example put together.

This works pretty straightforward and without any source code modifications in case anyone adds more checkboxes. You could even just modify the plain HTML template and everything would work  again.

Here's the magic:


All check box groups are grouped inside some HTML tag/container. In my case it's a &lt;div&gt;. These containers are marked with the class checkgroup.

&lt;div class="checkgroup"&gt;
    &lt;!-- Other content and checkboxes --&gt;
&lt;/div&gt;

Once verifying, I first determine all such containers in the current document.

var groups = document.getElementsByClassName('checkgroup');

Then I try to read custom attributes to get custom limits as well as a possible error message (stored in minimum, maximum, and message).

// Get the limits
if (group.hasAttribute('minchecked'))
    minimum = parseInt(group.getAttribute('minchecked'));
if (group.hasAttribute('maxchecked'))
    maximum = parseInt(group.getAttribute('maxchecked'));
// Get the actual error message
if (group.hasAttribute('errchecked'))
    message = group.getAttribute('errchecked');

I then iterate over all checkboxes included in the current group and count the number of checked instances.

var checkboxes = group.getElementsByTagName('input');
for (var j = 0; j &lt; checkboxes.length; ++j) {
    // Here I should check whether that's indeed a checkbox...
    if (checkboxes[j].checked)
        ++ticked;
}

Once this is done, there's a simple comparison on the limits and an error message is shown just in case.

// Show an error message and highlight the background
if (ticked &lt; minimum || ticked &gt; maximum) {
    group.style.backgroundColor = '#fcc';
    alert(message);
    group.style.backgroundColor = '';
}