HTML5并不直接支持在一个复选框组中只选中一个/至少一个复选框。下面是我使用Javascript的解决方案:

HTML

<input class='acb' type='checkbox' name='acheckbox[]' value='1' onclick='deRequire("acb")' required> One
<input class='acb' type='checkbox' name='acheckbox[]' value='2' onclick='deRequire("acb")' required> Two

JAVASCRIPT

function deRequireCb(elClass) {
  el = document.getElementsByClassName(elClass);

  var atLeastOneChecked = false; //at least one cb is checked
  for (i = 0; i < el.length; i++) {
    if (el[i].checked === true) {
      atLeastOneChecked = true;
    }
  }

  if (atLeastOneChecked === true) {
    for (i = 0; i < el.length; i++) {
      el[i].required = false;
    }
  } else {
    for (i = 0; i < el.length; i++) {
      el[i].required = true;
    }
  }
}

javascript将确保至少选中一个复选框，然后取消对整个复选框组的要求。如果选中的复选框变为未选中，那么它将再次需要所有的复选框!

一个通用的解决方案，无需更改提交事件或知道复选框的名称

构建一个函数，将复选框标记为HTML5-Invalid 扩展Change-Event并在开始时检查有效性

jQuery.fn.getSiblingsCheckboxes = function () { let $this = $(this); let $parent = $this.closest('form, .your-checkbox-listwrapper'); return $parent.find('input[type="checkbox"][name="' + $this.attr('name')+'"]').filter('*[required], *[data-required]'); } jQuery.fn.checkRequiredInputs = function() { return this.each(function() { let $this = $(this); let $parent = $this.closest('form, .your-checkbox-list-wrapper'); let $allInputs = $this.getSiblingsCheckboxes(); if ($allInputs.filter(':checked').length > 0) { $allInputs.each(function() { // this.setCustomValidity(''); // not needed $(this).removeAttr('required'); $(this).closest('li').css('color', 'green'); // for debugging only }); } else { $allInputs.each(function() { // this.reportValidity(); // not needed $(this).attr('required', 'required'); $(this).closest('li').css('color', 'red'); // for debugging only }); } return true; }); }; $(document).ready(function() { $('input[type="checkbox"][required="required"], input[type="checkbox"][required]').not('*[data-required]').not('*[disabled]').each(function() { let $input = $(this); let $allInputs = $input.getSiblingsCheckboxes(); $input.attr('data-required', 'required'); $input.removeAttr('required'); $input.on('change', function(event) { $input.checkRequiredInputs(); }); }); $('input[type="checkbox"][data-required="required"]').checkRequiredInputs(); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> </head> <form> <ul> <li><input type="checkbox" id="checkbox1" name="countries" value="Argentina" required="required">Argentina</li> <li><input type="checkbox" id="checkbox2" name="countries" value="France" required="required">France</li> <li><input type="checkbox" id="checkbox3" name="countries" value="Germany" required="required">Germany</li> <li><input type="checkbox" id="checkbox4" name="countries" value="Japan" required="required">Japan</li> <li><input type="checkbox" id="checkbox5" name="countries" value="Australia" required="required">Australia</li> </ul> <input type="submit" value="Submit"> </form>

我也遇到过同样的问题，我的解决方案是这样的:

HTML:

<form id="processForm.php" action="post">
  <div class="input check_boxes required wish_payment_type">
    <div class="wish_payment_type">
    <span class="checkbox payment-radio">
      <label for="wish_payment_type_1">
        <input class="check_boxes required" id="wish_payment_type_1" name="wish[payment_type][]" type="checkbox" value="1">Foo
      </label>
    </span>
    <span class="checkbox payment-radio">
      <label for="wish_payment_type_2">
        <input class="check_boxes required" id="wish_payment_type_2" name="wish[payment_type][]" type="checkbox" value="2">Bar
      </label>
    </span>
    <span class="checkbox payment-radio">
      <label for="wish_payment_type_3">
        <input class="check_boxes required" id="wish_payment_type_3" name="wish[payment_type][]" type="checkbox" value="3">Buzz
      </label>
          
      <input id='submit' type="submit" value="Submit">
  </div>
</form>

JS:

var verifyPaymentType = function () {
  var checkboxes = $('.wish_payment_type .checkbox');
  var inputs = checkboxes.find('input');
  var first = inputs.first()[0];

  inputs.on('change', function () {
    this.setCustomValidity('');
  });

  first.setCustomValidity(checkboxes.find('input:checked').length === 0 ? 'Choose one' : '');
}

$('#submit').click(verifyPaymentType);

https://jsfiddle.net/oywLo5z4/

嗨，只是使用一个文本框附加组复选框。当单击任何复选框时，在该文本框中输入值。使该文本框必须和只读。

我在一组复选框中添加了一个隐形收音机。 当至少选中一个选项时，无线电也被设置为选中。 当所有选项都被取消时，收音机也被设置为取消。 因此，表单使用无线电提示“请至少选中一个选项”

你不能使用display: none，因为无线电不能聚焦。 我使单选字符的大小等于整个复选框的大小，这样在提示时就更明显了。

HTML

<form>
  <div class="checkboxs-wrapper">
    <input id="radio-for-checkboxes" type="radio" name="radio-for-required-checkboxes" required/>
    <input type="checkbox" name="option[]" value="option1"/>
    <input type="checkbox" name="option[]" value="option2"/>
    <input type="checkbox" name="option[]" value="option3"/>
  </div>
  <input type="submit" value="submit"/>
</form>

Javascript

var inputs = document.querySelectorAll('[name="option[]"]')
var radioForCheckboxes = document.getElementById('radio-for-checkboxes')
function checkCheckboxes () {
    var isAtLeastOneServiceSelected = false;
    for(var i = inputs.length-1; i >= 0; --i) {
        if (inputs[i].checked) isAtLeastOneCheckboxSelected = true;
    }
    radioForCheckboxes.checked = isAtLeastOneCheckboxSelected
}
for(var i = inputs.length-1; i >= 0; --i) {
    inputs[i].addEventListener('change', checkCheckboxes)
}

CSS

.checkboxs-wrapper {
  position: relative;
}
.checkboxs-wrapper input[name="radio-for-required-checkboxes"] {
    position: absolute;
    margin: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-appearance: none;
    pointer-events: none;
    border: none;
    background: none;
}

https://jsfiddle.net/codus/q6ngpjyc/9/

不幸的是，HTML5并没有提供一种开箱即用的方法来做到这一点。

但是，使用jQuery，您可以轻松控制复选框组是否至少有一个选中元素。

考虑下面的DOM片段:

<div class="checkbox-group required">
    <input type="checkbox" name="checkbox_name[]">
    <input type="checkbox" name="checkbox_name[]">
    <input type="checkbox" name="checkbox_name[]">
    <input type="checkbox" name="checkbox_name[]">
</div>

你可以用这个表达:

$('div.checkbox-group.required :checkbox:checked').length > 0

如果至少选中一个元素，则返回true。 在此基础上，您可以实现验证检查。