Using the HTML5 "required" attribute for a group of checkboxes?

html

validation-checks

javascript-validation

jquery-validation

byAlex Kataev·Mar 9, 2025

Here's how you can create a hidden required checkbox that ensures a minimum selection in a checkbox group:

<form>
  <input type="checkbox" name="options" value="1"><label>Option 1</label>
  <input type="checkbox" name="options" value="2"><label>Option 2</label>
  <!-- Hidden + required + clever; visible checkboxes manage it -->
  <input type="checkbox" name="options" required hidden onchange="this.checked=!document.querySelector('input[name=\"options\"]:checked')">
  <button type="submit">Submit</button>
</form>

When one visible box is checked, the form can submit as the hidden field is automatically unchecked, fulfilling the required constraint.

Implementing validation checks with JavaScript & jQuery

HTML5 doesn't have built-in support to require one checkbox checked within a group. JavaScript and jQuery come to the rescue to set up a validation check during the submission of a form.

Effective validation with JavaScript

If you're a JavaScript fan, unleash the power of setCustomValidity to display customized error messages for the checkbox group:

// Let's gather our bee workers
const checkboxGroup = document.querySelectorAll('input[name="options"]');
const form = document.querySelector('form');

// And organize them into productive teamwork
form.addEventListener('submit', function(event) {
  const isChecked = [...checkboxGroup].some(checkbox => checkbox.checked);
  checkboxGroup[0].setCustomValidity(isChecked ? "" : "You must select at least one option.");

  // They say bees are hard workers. Let's check...
  // (Sorry, I couldn't resist)
  if (!form.checkValidity()) event.preventDefault();
});

Handy jQuery to the Rescue

For those who fancy the simplicity of jQuery, you can pull off similar logic using the .prop() function to dynamically toggle the "required" attribute:

// The bees are buzzing...Do we have honey, or do we prefer grape juice?
$('form').on('submit', function(e) {
  if ($('input[name="options"]:checked').length === 0) {
    $('input[name="options"]').first().prop('required', true);
    e.preventDefault(); // Pause...Someone didn't choose, this bee team isn't ready yet!
  } else {
    $('input[name="options"]').prop('required', false); // Alright, let's make some honey!
  }
});

Juggling with dynamic changes

Bored of static checkboxes? If you can add or remove checkboxes dynamically, validate their changes on the fly. Just bind an onchange event to toggle the "required" attribute, like a yo-yo:

$('input[name="options"]').on('change', function() {
  const requiredChecked = $('input[name="options"]:checked').length > 0;
  $('input[name="options"]').prop('required', !requiredChecked);
  // Whoa! This checkbox flipped faster than a pancake!
});

Call for Webshims Backup

Cautious about old or mischievous browsers? Don't worry; the Webshims library is on standby to polyfill the gaps in HTML5 features.

Practical situations to consider

Dealing with diverse situations and challenges is part of a developer's life. Let's explore some common scenarios where requiring at least one checkbox is crucial.

Dynamic form elements

When checkboxes are added or removed dynamically in your form, ensure efficient integration of validation logic to deal with these complexities.

Dealing with pre-ticked boxes

What if some checkboxes are checked in advance? Your validation logic should accommodate these edge cases, accounting for users unchecking all boxes.

Non-JavaScript fallback

For cases where JavaScript is unavailable, arranging a complete HTML solution is tough. Consider server-side validation to ensure user selections fulfill the requirements.