如何判断按钮组中的按钮是否被选中？相关代码实现咨询

看起来你已经搭好了基础的表单提交逻辑，但代码片段有点不完整，我帮你补全并优化一下，确保它能稳定实现「未选中按钮组时弹窗提示，选中后提交表单」的需求。

完整的HTML结构（包含按钮组、表单和提交按钮） #

首先先把HTML部分补全，这里假设你用的是Bootstrap风格的按钮组（如果不是，样式类可以自己调整）：

<form id="frmSubmit" action="/your-submit-url" method="POST">
  <!-- 按钮组 -->
  <div class="row">
    <div class="btn-group" id="btnGeneral" role="group" aria-label="状态选择">
      <button type="button" class="btn btn-secondary" data-value="draft">草稿</button>
      <button type="button" class="btn btn-secondary" data-value="published">已发布</button>
      <button type="button" class="btn btn-secondary" data-value="archived">已归档</button>
    </div>
  </div>

  <!-- 提交按钮 -->
  <button type="button" id="Save" class="btn btn-primary mt-4">保存并提交</button>
</form>

补全并优化后的JavaScript代码 #

这里完善了你的逻辑，加上了按钮组的选中切换、完整的校验逻辑，还有必要的注释：

// 绑定保存按钮的点击事件
$("#Save").on("click", Save);

// 保存按钮的核心处理函数
function Save(e) {
  // 先阻止按钮的默认行为，避免意外的表单提交
  e.preventDefault();
  
  // 调用校验函数，若未通过则终止流程
  if (!GeneralStatusAlert()) {
    return;
  }
  
  // 校验通过，提交表单
  $('#frmSubmit').submit();
}

// 校验按钮组是否有选中项的函数
function GeneralStatusAlert() {
  // 获取选中的按钮值
  const selectedStatus = GetGeneralStatus();
  
  // 如果没有选中项，弹出提示并返回false
  if (!selectedStatus) {
    alert("请先选择一个状态选项！");
    return false;
  }
  
  // 有选中项，返回true
  return true;
}

// 获取按钮组中选中项的值
function GetGeneralStatus() {
  // 找到按钮组下带有active类的按钮（Bootstrap按钮组默认用active标识选中状态）
  const selectedBtn = $("#btnGeneral").find(".btn.active");
  
  // 如果有选中按钮，返回它的data-value；否则返回空字符串
  return selectedBtn.length > 0 ? selectedBtn.data("value") : "";
}

// 给按钮组添加选中切换逻辑（点击按钮时切换active状态）
$("#btnGeneral .btn").on("click", function() {
  // 移除同组其他按钮的active类
  $(this).siblings().removeClass("active");
  // 给当前点击的按钮添加active类
  $(this).addClass("active");
});

关键逻辑说明 #

• 按钮选中状态管理：通过给点击的按钮添加active类、移除同组其他按钮的active类，来标记选中状态，这是Bootstrap按钮组的标准用法，如果你用的是其他UI框架，只要替换对应的选中类名即可。
• 校验流程：点击保存按钮后，先调用GeneralStatusAlert检查是否有选中项，没有就弹出提示并终止提交；通过校验后才会提交表单。
• 默认行为阻止：在Save函数开头加上e.preventDefault()，避免按钮的默认行为干扰我们的自定义逻辑。

如果你的项目是异步提交表单，还可以把$('#frmSubmit').submit()换成AJAX请求，比如：

// 异步提交示例
$.ajax({
  url: $('#frmSubmit').attr('action'),
  method: $('#frmSubmit').attr('method'),
  data: $('#frmSubmit').serialize() + "&status=" + GetGeneralStatus(),
  success: function(response) {
    // 提交成功后的处理
    alert("提交成功！");
  },
  error: function() {
    alert("提交失败，请重试！");
  }
});

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