开发JS表单验证插件：如何在jQuery表单循环中检测单选/复选框选中状态？

看起来你已经搞定了文本字段的验证逻辑，卡在单选和复选框这块很正常——毕竟它们的选中逻辑和文本输入不一样，尤其是多组单选的情况，不能像文本框那样单个元素判断。我来给你梳理下具体的实现思路，结合你现有的代码结构来调整：

核心思路 #

1. 单选按钮按name分组检查：同一组单选按钮共享同一个name属性，必须确保每组至少有一个选项被选中，而不是逐个检查每个单选按钮。
2. 复选框分两种场景处理：
   • 单个必填复选框（比如“同意用户协议”）：直接检查该元素是否被选中。
   • 复选框组（比如“选择兴趣爱好”）：和单选组逻辑类似，按name分组，确保至少选中一个选项。

整合到你的提交事件中的代码示例 #

_self.on("submit", function(event) { 
  console.log('form submitted '); 
  let isValid = true; // 全局验证状态

  // --- 保留你已有的文本字段验证逻辑 ---
  _self.find('.'+settings.errorClass).each(function(){ 
    let type = $(this).attr('type'); 
    let val = $(this).val(); 
    // 你的文本字段验证逻辑（比如非空检查、格式验证等）
    // 如果验证失败，记得设置 isValid = false;
  });

  // --- 新增：单选按钮组验证 ---
  const uniqueRadioNames = new Set();
  // 筛选出需要验证的单选按钮（带你的errorClass）
  _self.find(`input[type="radio"].${settings.errorClass}`).each(function() {
    const radioName = $(this).attr('name');
    if (radioName) uniqueRadioNames.add(radioName);
  });

  uniqueRadioNames.forEach(name => {
    // 检查该组是否有选中的单选按钮
    const hasSelected = _self.find(`input[type="radio"][name="${name}"].${settings.errorClass}:checked`).length > 0;
    if (!hasSelected) {
      console.log(`请选择「${name}」组中的一项`);
      // 这里可以添加错误提示（比如给组内元素加错误样式）
      _self.find(`input[type="radio"][name="${name}"]`).parent().addClass('validation-error');
      isValid = false;
    } else {
      // 验证通过则移除错误样式
      _self.find(`input[type="radio"][name="${name}"]`).parent().removeClass('validation-error');
    }
  });

  // --- 新增：复选框验证 ---
  // 1. 单个必填复选框（比如同意条款）
  _self.find(`input[type="checkbox"].${settings.errorClass}`).each(function() {
    const $checkbox = $(this);
    if (!$checkbox.is(':checked')) {
      console.log(`请勾选「${$checkbox.attr('name')}」`);
      $checkbox.parent().addClass('validation-error');
      isValid = false;
    } else {
      $checkbox.parent().removeClass('validation-error');
    }
  });

  // 2. 复选框组（至少选一个，假设你用`group-required`类标记这类组）
  const uniqueCheckboxGroupNames = new Set();
  _self.find(`input[type="checkbox"].${settings.errorClass}.group-required`).each(function() {
    const checkboxName = $(this).attr('name');
    if (checkboxName) uniqueCheckboxGroupNames.add(checkboxName);
  });

  uniqueCheckboxGroupNames.forEach(name => {
    const hasSelected = _self.find(`input[type="checkbox"][name="${name}"].${settings.errorClass}:checked`).length > 0;
    if (!hasSelected) {
      console.log(`请选择「${name}」组中的至少一项`);
      _self.find(`input[type="checkbox"][name="${name}"]`).parent().addClass('validation-error');
      isValid = false;
    } else {
      _self.find(`input[type="checkbox"][name="${name}"]`).parent().removeClass('validation-error');
    }
  });

  // --- 最终判断：验证不通过则阻止表单提交 ---
  if (!isValid) {
    event.preventDefault();
  }
});

关键细节说明 #

• 用Set避免重复检查：因为同一组的单选/复选框name相同，用Set存储唯一的name值，确保每个组只检查一次，避免冗余操作。
• 选中状态判断：jQuery的:checked选择器可以直接筛选出已选中的表单元素，结合length属性就能判断是否有选中项。
• 错误样式控制：我在示例里加了validation-error类的添加/移除，你可以根据自己的需求替换成对应的错误提示逻辑（比如显示错误文本）。

这样调整后，就能覆盖单选按钮组、单个复选框、复选框组的验证场景，和你已有的文本验证逻辑无缝整合啦。

内容的提问来源于stack exchange，提问作者Aman jaura