非常简单的方法来验证是否至少有一个复选框被选中:

function isAtLeastOneChecked(name) {
    let checkboxes = Array.from(document.getElementsByName(name));
    return checkboxes.some(e => e.checked);
}

然后，您可以实现想要显示错误的任何逻辑。

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

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/

我们也可以用html5轻松做到这一点，只需要添加一些jquery代码

Demo

HTML

<form>
 <div class="form-group options">
   <input type="checkbox" name="type[]" value="A" required /> A
   <input type="checkbox" name="type[]" value="B" required /> B
   <input type="checkbox" name="type[]" value="C" required /> C
   <input type="submit">
 </div>
</form>

Jquery

$(function(){
    var requiredCheckboxes = $('.options :checkbox[required]');
    requiredCheckboxes.change(function(){
        if(requiredCheckboxes.is(':checked')) {
            requiredCheckboxes.removeAttr('required');
        } else {
            requiredCheckboxes.attr('required', 'required');
        }
    });
});

我知道这里有很多解决方案，但我发现没有一个能满足我的所有要求:

不需要自定义编码 代码在页面加载时工作 不需要自定义类(复选框或它们的父类) 我需要几个复选框列表共享相同的名称，通过他们的API提交Github问题，并使用名称标签[]跨许多表单字段分配标签(两个复选框列表和一些选择和文本框)-授予我可以实现这一点，没有他们共享相同的名称，但我决定尝试一下，它起作用了。

唯一的要求是jQuery，如果你想用普通的JS重写它，它很容易被消除。您可以将其与@ewall的出色解决方案结合起来，添加自定义验证错误消息。

/* required checkboxes */ jQuery(function ($) { var $requiredCheckboxes = $("input[type='checkbox'][required]"); /* init all checkbox lists */ $requiredCheckboxes.each(function (i, el) { //this could easily be changed to suit different parent containers var $checkboxList = $(this).closest("div, span, p, ul, td"); if (!$checkboxList.hasClass("requiredCheckboxList")) $checkboxList.addClass("requiredCheckboxList"); }); var $requiredCheckboxLists = $(".requiredCheckboxList"); $requiredCheckboxLists.each(function (i, el) { var $checkboxList = $(this); $checkboxList.on("change", "input[type='checkbox']", function (e) { updateCheckboxesRequired($(this).parents(".requiredCheckboxList")); }); updateCheckboxesRequired($checkboxList); }); function updateCheckboxesRequired($checkboxList) { var $chk = $checkboxList.find("input[type='checkbox']").eq(0), cblName = $chk.attr("name"), cblNameAttr = "[name='" + cblName + "']", $checkboxes = $checkboxList.find("input[type='checkbox']" + cblNameAttr); if ($checkboxList.find(cblNameAttr + ":checked").length > 0) { $checkboxes.prop("required", false); } else { $checkboxes.prop("required", true); } } }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form method="post" action="post.php"> <div> Type of report: </div> <div> <input type="checkbox" id="chkTypeOfReportError" name="label[]" value="Error" required> <label for="chkTypeOfReportError">Error</label> <input type="checkbox" id="chkTypeOfReportQuestion" name="label[]" value="Question" required> <label for="chkTypeOfReportQuestion">Question</label> <input type="checkbox" id="chkTypeOfReportFeatureRequest" name="label[]" value="Feature Request" required> <label for="chkTypeOfReportFeatureRequest">Feature Request</label> </div> <div> Priority </div> <div> <input type="checkbox" id="chkTypeOfContributionBlog" name="label[]" value="Priority: High" required> <label for="chkPriorityHigh">High</label> <input type="checkbox" id="chkTypeOfContributionBlog" name="label[]" value="Priority: Medium" required> <label for="chkPriorityMedium">Medium</label> <input type="checkbox" id="chkTypeOfContributionLow" name="label[]" value="Priority: Low" required> <label for="chkPriorityMedium">Low</label> </div> <div> <input type="submit" /> </div> </form>

不幸的是，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。 在此基础上，您可以实现验证检查。

受到@thegauraw和@Brian Woodward的启发，我为JQuery用户收集了一些答案，其中包括一条自定义验证错误消息:

$cbx_group = $("input:checkbox[name^='group']");
$cbx_group.on("click", function () {
  if ($cbx_group.is(":checked")) {
    // checkboxes become unrequired as long as one is checked
    $cbx_group.prop("required", false).each(function () {
      this.setCustomValidity("");
    });
  } else {
    // require checkboxes and set custom validation error message
    $cbx_group.prop("required", true).each(function () {
      this.setCustomValidity("Please select at least one checkbox.");
    });
  }
});

注意，我的表单默认选中了一些复选框。

也许你们中的一些JavaScript/JQuery向导可以更严格地使用它?