本文讲解如何用原生 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 <pre class="brush:php;toolbar:false;">/* 基础样式 */
.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 加载完成：将脚本置于
