如何实现复选框组必选校验 确保至少一个复选框被选中

你已经实现的复选框互斥逻辑本身没有问题，无法添加必选校验的原因是：HTML原生的required属性只对单个输入元素生效，你现在使用的是3个独立复选框组成的选择组，需要手动添加组级别的提交校验即可实现必填要求，具体实现如下：

• 先对HTML做两处小调整：
  • 给包裹字段的form标签设置唯一id，用于绑定提交事件
  • 给3个同组复选框添加相同的name属性，同时补上value属性方便后续提交取值
• 在原有jQuery逻辑的基础上，添加表单提交监听事件，触发提交时先统计选中的复选框数量：如果数量为0则阻止提交，提示用户选择；数量大于0则正常走提交流程。

完整实现代码：

<!-- 表单添加id，替换为你实际项目里的表单id即可 -->
<form id="userForm">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <div class="row mx-auto">
    <div class="border border-dark col-sm-3">
      <h4 class="d-inline">Gender</h4>
      <p class="d-inline">*</p>
    </div>
    <!-- 复选框统一加name和value属性 -->
    <div class="border border-dark col-sm-2"><input type="checkbox" class="check3" name="gender" value="male">Male</div>
    <div class="border border-dark col-sm-2"><input type="checkbox" class="check3" name="gender" value="female">Female</div>
    <div class="border border-dark col-sm-5"><input type="checkbox" class="check3" name="gender" value="transgender">Transgender</div>
  </div>
  <!-- 其他表单字段省略 -->
  <button type="submit">提交表单</button>
</form>

$(document).ready(function() {
  // 原有互斥单选逻辑保持不变
  $('.check3').click(function() {
    $('.check3').not(this).prop('checked', false);
  });

  // 新增必填校验逻辑
  $('#userForm').on('submit', function(e) {
    // 统计选中的性别选项数量
    const checkedCount = $('.check3:checked').length;
    if (checkedCount === 0) {
      e.preventDefault(); // 阻止表单默认提交
      // 这里的提示可以替换成你项目里的统一提示样式，比如行内红字提示
      alert('性别为必填项，请选择后提交');
      return false;
    }
    // 校验通过，正常提交
  })
});

优化建议：如果没有强制要求必须用复选框的场景，更推荐直接使用原生单选按钮<input type="radio" name="gender" required>实现性别选择，原生自带互斥效果和required必填校验，不需要额外写jQuery逻辑，可访问性和兼容性更好。

内容的提问来源于stack exchange，提问作者Md Mohtesham Azam