Checkboxes

CSS Checkboxes and (More) Accessible Drop-downs

Here's a pure CSS solution to the challenge of styling input check-boxes. The check-boxes also act as a trigger for displaying hidden content via the :checked psuedo-class. You might use this mechanism as a means for putting together drop-downs and accordion-menus, although the technique is most applicable to HTML forms. You'll find some 508/WCAG considerations here to make this UI as accessibility compliant as possible.

Accessibility Disclaimer

I'm not an accessibility auditor, so don't take it for granted that what you find here is fully 508/WCAG compliant. I leave these kinds of determinations to proper auditors. Nonetheless, standards compliance is an issue I take seriously, and I've made every attempt to keep this code as accessible as possible. Use at your own risk. If accessibility isn't a thing for you, be damned with the consequences and have at it!

Tags

Form Validation: Require at Least One Checkbox Before Submit

This is a simple way to force a user to make a selection from a fieldset of checkboxes in order to submit a form. With a little jQuery magic, it's actually quite easy.

To keep you from wondering whether what you find here is applicable to your specific use, here's a quick overview of what we want to accomplish. We'll start with a set of radio-buttons; one of these will be used to show a hidden fieldset of checkboxes. From there, it's crucially important that users select at least one of these checkboxes before submitting our form; we'll use jQuery to set up some validation rules to ensure this happens.

Note: we could use pure JavaScript for this, but jQuery is in my experience a lot simpler to use when capturing checked values as variables.

Tags

Subscribe to Checkboxes