如何验证Bootstrap激活标签页中至少选择一个单选/复选框？

嗨，这个需求在Bootstrap多标签页问卷场景里挺常见的，我给你一步步拆解实现方法：

我们需要做的就是：找到当前激活的标签页 → 在该标签页内筛选出单选/复选框 → 判断是否至少有一个被选中，然后根据触发时机（提交表单/切换标签）执行验证逻辑。

以下提供两种常用场景的代码，你可以根据自己的需求选择：

场景1：提交表单时验证当前激活标签页 #

假设你的表单ID是survey-form，可以用jQuery（Bootstrap常用搭配）实现：

$('#survey-form').on('submit', function(e) {
  // 获取当前激活的标签页容器
  const activeTab = $('.tab-content .tab-pane.active');
  
  // 精准查找当前标签页内的单选、复选框（如果你的选项都在.considerable容器里，可加上这个类缩小范围）
  const radios = activeTab.find('.considerable input[type="radio"]');
  const checkboxes = activeTab.find('.considerable input[type="checkbox"]');
  
  let hasSelected = false;

  // 检查单选按钮：只要有一个单选框被选中就标记为已选择
  if (radios.length > 0) {
    hasSelected = radios.is(':checked');
  }

  // 检查复选框：只要选中数量大于0就标记为已选择
  if (checkboxes.length > 0) {
    hasSelected = checkboxes.filter(':checked').length > 0;
  }

  // 未选择任何选项时，阻止表单提交并提示
  if (!hasSelected) {
    e.preventDefault();
    // 这里可以换成Bootstrap的alert组件，视觉更统一
    alert('请在当前标签页中至少选择一个选项！');
  }
});

如果偏好原生JavaScript，代码如下：

document.getElementById('survey-form').addEventListener('submit', function(e) {
  const activeTab = document.querySelector('.tab-content .tab-pane.active');
  const radios = activeTab.querySelectorAll('.considerable input[type="radio"]');
  const checkboxes = activeTab.querySelectorAll('.considerable input[type="checkbox"]');
  
  let hasSelected = false;

  // 遍历单选按钮检查是否有选中项
  if (radios.length > 0) {
    for (const radio of radios) {
      if (radio.checked) {
        hasSelected = true;
        break;
      }
    }
  }

  // 遍历复选框检查是否有选中项
  if (checkboxes.length > 0 && !hasSelected) {
    for (const checkbox of checkboxes) {
      if (checkbox.checked) {
        hasSelected = true;
        break;
      }
    }
  }

  if (!hasSelected) {
    e.preventDefault();
    alert('请在当前标签页中至少选择一个选项！');
  }
});

场景2：切换标签页前验证当前标签 #

如果想阻止用户跳转到下一个标签页（直到完成当前页的选择），可以给标签导航绑定点击事件：

$('.nav-tabs a').on('click', function(e) {
  const currentActiveTab = $('.tab-content .tab-pane.active');
  const radios = currentActiveTab.find('.considerable input[type="radio"]');
  const checkboxes = currentActiveTab.find('.considerable input[type="checkbox"]');
  
  let hasSelected = true;

  // 只有当前标签页存在单选/复选框时才验证
  if (radios.length > 0) {
    hasSelected = radios.is(':checked');
  } else if (checkboxes.length > 0) {
    hasSelected = checkboxes.filter(':checked').length > 0;
  }

  // 未完成选择时阻止标签切换
  if (!hasSelected) {
    e.preventDefault();
    alert('请先完成当前标签页的选项选择！');
  }
});

• 提示样式：别用原生alert，可以在当前标签页顶部插入Bootstrap的.alert-danger组件，样式更统一；
• 动态移除提示：如果用户后续选择了选项，记得把之前的提示移除，避免重复显示；
• 兼容混合场景：如果某个标签页同时有单选和复选框，可以调整逻辑为「只要其中一类有选中项即可」。

内容的提问来源于stack exchange，提问作者Unknown Coder