Required attribute on multiple checkboxes with the same name

Question

I have a list of checkboxes with the same name attribute  and I need to validate that at least one of them has been selected  But when I use the html5 attribute  quot required quot  on all of them  the browser  chrome  amp  ff  doesn t allow me to submit the form unless all of them are checked  sample code   lt label for  quot a-0 quot  gt a-0 lt  label gt   lt input type  quot checkbox quot  name  quot q-8 quot  id  quot a-0 quot  required   gt   lt label for  quot a-1 quot  gt a-1 lt  label gt   lt input type  quot checkbox quot  name  quot q-8 quot  id  quot a-1 quot  required   gt   lt label for  quot a-2 quot  gt a-2 lt  label gt   lt input type  quot checkbox quot  name  quot q-8 quot  id  quot a-2 quot  required   gt   When using the same with radio inputs  the form works as expected  if one of the options is selected the form validates  According to Joe Hopfgartner  who claims to quote the html5 specs   the supposed behaviour is   For checkboxes  the required attribute shall only be satisfied when one or more of the checkboxes with that name in that form are checked  For radio buttons  the required attribute shall only be satisfied when exactly one of the radio buttons in that radio group is checked   am i doing something wrong  or is this a browser bug  on both chrome  amp  ff

User · Answer

To provide another approach similar to the answer by @IvanCollantes. It works by additionally filtering the required checkboxes by name. I also simplified the code a bit and checks for a default checked checkbox.

_x000D_

jQuery(function($) {_x000D_
  var requiredCheckboxes = $(':checkbox[required]');_x000D_
  requiredCheckboxes.on('change', function(e) {_x000D_
    var checkboxGroup = requiredCheckboxes.filter('[name="' + $(this).attr('name') + '"]');_x000D_
    var isChecked = checkboxGroup.is(':checked');_x000D_
    checkboxGroup.prop('required', !isChecked);_x000D_
  });_x000D_
  requiredCheckboxes.trigger('change');_x000D_
});

_x000D_

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>_x000D_
<form target="_blank">_x000D_
  <p>_x000D_
    At least one checkbox from each group is required..._x000D_
  </p>_x000D_
  <fieldset>_x000D_
    <legend>Checkboxes Group test</legend>_x000D_
    <label>_x000D_
      <input type="checkbox" name="test[]" value="1" checked="checked" required="required">test-1_x000D_
    </label>_x000D_
    <label>_x000D_
      <input type="checkbox" name="test[]" value="2" required="required">test-2_x000D_
    </label>_x000D_
    <label>_x000D_
      <input type="checkbox" name="test[]" value="3" required="required">test-3_x000D_
    </label>_x000D_
  </fieldset>_x000D_
  <br>_x000D_
  <fieldset>_x000D_
    <legend>Checkboxes Group test2</legend>_x000D_
    <label>_x000D_
      <input type="checkbox" name="test2[]" value="1" required="required">test2-1_x000D_
    </label>_x000D_
    <label>_x000D_
      <input type="checkbox" name="test2[]" value="2" required="required">test2-2_x000D_
    </label>_x000D_
    <label>_x000D_
      <input type="checkbox" name="test2[]" value="3" required="required">test2-3_x000D_
    </label>_x000D_
  </fieldset>_x000D_
  <hr>_x000D_
  <button type="submit" value="submit">Submit</button>_x000D_
</form>

_x000D_

User · Answer

Building on icova s answer  here s the code so you can use a custom HTML5 validation message     function         var requiredCheckboxes       checkbox required         requiredCheckboxes change function             if  requiredCheckboxes is   checked     requiredCheckboxes removeAttr  required             else  requiredCheckboxes attr  required    required                    input   each function               this  on  invalid   function e                e target setCustomValidity                  if   e target validity valid                    e target setCustomValidity  Please  select at least one of these options                             on  input  click   function e   e target setCustomValidity

User · Answer

Sorry  now I ve read what you expected better  so I m updating the answer   Based on the HTML5 Specs from W3C  nothing is wrong  I created this JSFiddle test and it s behaving correctly based on the specs  for those browsers based on the specs  like Chrome 11 and Firefox 4     x000D   x000D   lt form gt  x000D       lt input type  checkbox  name  q  id  a-0  required autofocus gt  x000D       lt label for  a-0  gt a-1 lt  label gt  x000D       lt br gt  x000D   x000D       lt input type  checkbox  name  q  id  a-1  required gt  x000D       lt label for  a-1  gt a-2 lt  label gt  x000D       lt br gt  x000D   x000D       lt input type  checkbox  name  q  id  a-2  required gt  x000D       lt label for  a-2  gt a-3 lt  label gt  x000D       lt br gt  x000D   x000D       lt input type  submit  gt  x000D   lt  form gt  x000D   x000D   x000D    I agree that it isn t very usable  in fact many people have complained about it in the W3C s mailing lists    But browsers are just following the standard s recommendations  which is correct  The standard is a little misleading  but we can t do anything about it in practice  You can always use JavaScript for form validation  though  like some great jQuery validation plugin   Another approach would be choosing a polyfill that can make  almost  all browsers interpret form validation rightly

User · Answer

A little jQuery fix     function        var chbxs       checkbox required         var namedChbxs           chbxs each function            var name     this  attr  name            namedChbxs name     namedChbxs name          add this               chbxs change function            var name     this  attr  name            var cbx   namedChbxs name           if cbx filter   checked   length gt 0               cbx removeAttr  required             else              cbx attr  required   required

User · Answer

You can make it with jQuery a less lines     function         var requiredCheckboxes       checkbox required          requiredCheckboxes change function             if requiredCheckboxes is   checked                  requiredCheckboxes removeAttr  required                       else               requiredCheckboxes attr  required    required                             With     checkbox required    you select all checkboxes with the attribute required  then  with the  change method applied to this group of checkboxes  you can execute the function you want when any item of this group changes  In this case  if any of the checkboxes is checked  I remove the required attribute for all of the checkboxes that are part of the selected group   I hope this helps   Farewell

User · Answer

var verifyPaymentType   function           coloque os checkbox dentro de uma div com a class checkbox   var inputs    window jQuery   checkbox   find  input      var first   inputs first   0      inputs on  change   function          this setCustomValidity               first setCustomValidity  window jQuery   checkbox   find  input checked   length     0    Choose one            window jQuery   submit   click verifyPaymentType

User · Answer

i had the same problem  my solution was apply the required attribute to all elements   lt input type  checkbox  name  checkin days    required  required  value  0    gt  lt span class  w  gt S lt  span gt   lt input type  checkbox  name  checkin days    required  required  value  1    gt  lt span class  w  gt M lt  span gt   lt input type  checkbox  name  checkin days    required  required  value  2    gt  lt span class  w  gt T lt  span gt   lt input type  checkbox  name  checkin days    required  required  value  3    gt  lt span class  w  gt W lt  span gt   lt input type  checkbox  name  checkin days    required  required  value  4    gt  lt span class  w  gt T lt  span gt   lt input type  checkbox  name  checkin days    required  required  value  5    gt  lt span class  w  gt F lt  span gt   lt input type  checkbox  name  checkin days    required  required  value  6    gt  lt span class  w  gt S lt  span gt    when the user check one of the elements i remove the required attribute from all elements   var  checkedCheckboxes       recurrent checkin  checkbox name  checkin days     checked         checkboxes       recurrent checkin  checkbox name  checkin days          checkboxes click function      if  checkedCheckboxes length             checkboxes removeAttr  required          else            checkboxes attr  required    required

User · Answer

Here is improvement for icova s answer  It also groups inputs by name     function      var allRequiredCheckboxes       checkbox required       var checkboxNames          for  var i   0  i  lt  allRequiredCheckboxes length    i       var name   allRequiredCheckboxes i  name      checkboxNames push name          checkboxNames   checkboxNames reduce function p  c        if  p indexOf c   lt  0  p push c       return p               for  var i in checkboxNames        function          var name   checkboxNames i         var checkboxes      input name      name                checkboxes change function            if checkboxes is   checked                checkboxes removeAttr  required              else             checkboxes attr  required    required

[forms] Required attribute on multiple checkboxes with the same name?

Examples related to forms

Examples related to html