本文讲解如何用原生 JavaScript 实现：点击一个主按钮，批量切换其他指定按钮的 CSS 激活状态（如添加/移除 clicked 类），支持双向同步（点击即激活，再点击即取消），无需为每个按钮单独绑定事件。

本文讲解如何用原生 javascript 实现：点击一个主按钮，批量切换其他指定按钮的 css 激活状态（如添加/移除 `clicked` 类），支持双向同步（点击即激活，再点击即取消），无需为每个按钮单独绑定事件。

在前端交互开发中，常需实现“主控式批量状态切换”——例如一个总开关按钮，用于统一控制页面中若干功能按钮的视觉激活态（如高亮、变色）。这类需求不涉及真实点击行为或事件触发，仅需同步修改 CSS 类名来模拟“已点击”外观，因此应避免调用 .click() 方法，而应专注类名管理。

✅ 推荐实现方案（简洁可靠）

使用 classList.toggle() 配合统一 CSS 类选择器，是最轻量、可扩展性最强的方式：

<!-- 主控按钮 -->
<button class="clickme">一键切换</button>

<!-- 被控按钮组（支持任意数量，含125个也无压力） -->
<button class="click">按钮 1</button>
<button class="click">按钮 2</button>
<button class="click">按钮 3</button>
<button class="click">按钮 4</button>
<!-- ... 更多按钮 -->

// 监听主按钮点击
document.querySelector(".clickme").addEventListener("click", function() {
  // 获取所有目标按钮（使用 getElementsByClassName 性能略优于 querySelectorAll）
  const targetButtons = document.getElementsByClassName("click");

  // 遍历并切换每个按钮的 'clicked' 类
  for (let i = 0; i < targetButtons.length; i++) {
    targetButtons[i].classList.toggle("clicked");
  }
});

/* 基础样式 */
.click, .clickme {
  background-color: #ddd;
  border: 1px solid #aaa;
  color: #333;
  padding: 10px 20px;
  margin: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
}

/* 激活态样式（视觉反馈） */
.clicked {
  background-color: #4CAF50 !important;
  color: white;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

⚠️ 注意事项与优化建议

• 避免 ID 冗余操作：你之前尝试用 getElementById('111') 逐个操作，对 125 个按钮极不现实；统一 class 是标准解法。
• getElementsByClassName vs querySelectorAll：前者返回实时 HTMLCollection，性能更优；后者返回静态 NodeList。本场景推荐前者。
• 确保 DOM 加载完成：将脚本置于