如何用单个 JavaScript 函数实现按钮组的互斥激活（类似单选效果）-js教程-PHP中文网

本文介绍一种简洁、可复用的方案：通过事件委托和 data-active 属性管理按钮组状态，仅用一个函数即可实现多个尺寸按钮的单选式切换，避免重复绑定与硬编码 DOM 查询。

本文介绍一种简洁、可复用的方案：通过事件委托和 `data-active` 属性管理按钮组状态，仅用一个函数即可实现多个尺寸按钮的单选式切换，避免重复绑定与硬编码 dom 查询。

在电商场景中，产品尺寸选择器需满足「一次仅激活一个选项」的交互逻辑——这本质上是 UI 层的单选（radio-like）行为，但又希望保留按钮（

✅ 推荐方案：基于事件委托 + data-active 的按钮组管理

核心思路是不依赖 classList.toggle()，而是主动控制唯一激活态：点击任一按钮时，清除同组内所有按钮的 data-active，再为其自身设置该属性。这样既解耦了具体按钮 ID，又确保互斥性。

✅ HTML 结构（语义清晰，支持无障碍）

<label for="size-group">Size:</label>
<div id="size-group" class="button-group size">
  <button type="button" value="xs">XS</button>
  <button type="button" value="s">S</button>
  <button type="button" value="m" data-active>M</button>
  <button type="button" value="l">L</button>
  <button type="button" value="xl">XL</button>
  <button type="button" value="xxl">XXL</button>
</div>

? 提示：初始激活态通过 data-active 属性声明，无需 JS 初始化。

✅ CSS 样式（专注状态映射）

.button-group {
  display: inline-flex;
  gap: 0.5rem;
}

.button-group button {
  background: #f0f0f0;
  color: #c2c2c2;
  border: none;
  width: 38px;
  height: 42px;
  border-radius: 0.5rem;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.button-group button[data-active] {
  background: #000;
  color: #fff;
  box-shadow: 1px 2px 10px rgba(0, 0, 0, 0.3);
}

⚠️ 注意：移除了原 CSS 中 .size-btn.faded 和 .size-btn.active 的冗余组合类，改用 data-active 统一控制样式，更健壮且易维护。

Java 接口排错助手
在调试 Java 后端 API 故障时使用此技能，尤其适用于以下任务：分析日志、跨 Controller、Service 和 Mapper 层追踪请求、定位异常根因、检查 SQL 执行或参数流转，以及生成简洁的诊断结论与修复方案。

下载

✅ JavaScript（轻量、可复用、无侵入）

// 全局事件委托：监听所有 .button-group 内的点击
document.addEventListener('click', (e) => {
  const btn = e.target.closest('.button-group button');
  if (!btn || !btn.closest('.button-group')) return;

  const group = btn.closest('.button-group');
  // 清除组内所有激活态
  group.querySelectorAll('button').forEach(b => delete b.dataset.active);
  // 设置当前按钮为激活态
  btn.dataset.active = 'true';
});

// ✨ 可选：获取当前选中值（用于提交或状态同步）
function getSelectedSize() {
  const activeBtn = document.querySelector('.button-group.size button[data-active]');
  return activeBtn?.value || null;
}

// 示例：监听变化并打印
document.querySelector('.button-group.size').addEventListener('click', () => {
  console.log('Selected size:', getSelectedSize());
});