本文介绍如何使用 JavaScript 实现“主控按钮”一键切换多个目标按钮的 CSS 激活状态（如添加/移除 clicked 类），适用于需批量控制视觉反馈但无需实际触发事件的场景。

本文介绍如何使用 javascript 实现“主控按钮”一键切换多个目标按钮的 css 激活状态（如添加/移除 `clicked` 类），适用于需批量控制视觉反馈但无需实际触发事件的场景。

在构建交互式界面时，常遇到这样的需求：一个主按钮（如“全选”或“高亮模式”）被点击后，页面中若干指定按钮应同步呈现“已点击”视觉效果（例如背景变色、边框变化等），再次点击则全部还原——这并非真正触发每个按钮的 click 事件，而是统一管理其 CSS 类状态。

核心思路是：监听主按钮的点击事件，遍历所有目标按钮元素，对其 classList 执行 toggle() 操作。该方法简洁、高效，且天然支持双向同步（即“点击→激活，再点击→取消激活”）。

以下为完整可运行示例：

<!-- 主控按钮 -->
<button class="clickme">Toggle All</button>

<!-- 目标按钮组（可扩展至125个） -->
<button class="click">1</button>
<button class="click">2</button>
<button class="click">3</button>
<button class="click">4</button>
<!-- ... 更多 .click 按钮 -->

// 绑定主按钮点击事件
document.querySelector(".clickme").addEventListener("click", function() {
  // 获取所有目标按钮（返回 HTMLCollection）
  const targetButtons = document.getElementsByClassName("click");

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

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

/* “已点击”状态样式 */
.clicked {
  background-color: #4CAF50 !important;
  color: white;
  transform: scale(0.95);
}

/* 可选：主按钮悬停反馈 */
.clickme:hover {
  background-color: #2196F3;
}

✅ 关键说明与注意事项：

• 使用 getElementsByClassName("click") 而非 querySelectorAll() 是因前者返回实时集合（live collection），虽本例中无影响，但 toggle() 操作本身不依赖集合类型；若偏好现代语法，querySelectorAll('.click') 同样有效（需用 forEach 替代 for 循环）。
• classList.toggle("clicked") 是最佳选择：它自动判断类是否存在，存在则移除，不存在则添加，完美匹配“一键开关”逻辑。避免使用 add()/remove() 手动判断状态，易出错且冗余。
• 若仅需控制部分按钮（非全部125个），可在 HTML 中为需响应的按钮统一添加特定类（如 .click-target），并在 JS 中精准选取：document.querySelectorAll('.click-target')。
• 确保目标按钮在 DOM 加载完成后执行脚本——将 <script> 放在 </script>