如何实现点击按钮切换背景色、添加勾选图标及重置状态

可以通过HTML结构嵌套+CSS状态控制+JS批量重置来实现你要的效果，直接上可运行的代码示例：

1. HTML结构 #

给每个按钮里加一个默认隐藏的勾选图标（用✓示例，也可以换成图标字体）：

<div class="btn-group">
  <button class="color-btn" data-color="#ffcccc">
    <span class="check-icon">✓</span>
    红色背景
  </button>
  <button class="color-btn" data-color="#ccffcc">
    <span class="check-icon">✓</span>
    绿色背景
  </button>
  <button class="color-btn" data-color="#ccccff">
    <span class="check-icon">✓</span>
    蓝色背景
  </button>
</div>

2. CSS样式 #

控制按钮默认状态、选中状态，以及勾选图标的显示/隐藏：

.color-btn {
  padding: 8px 16px;
  margin: 0 4px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: #fff;
  cursor: pointer;
  position: relative;
  padding-left: 26px; /* 给图标留出位置 */
}

/* 选中状态的背景色 */
.color-btn.active {
  background-color: var(--active-color);
  border-color: #666;
}

/* 勾选图标默认隐藏 */
.check-icon {
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  display: none;
  color: #fff;
  font-weight: bold;
}

/* 选中时显示图标 */
.color-btn.active .check-icon {
  display: inline-block;
}

3. JavaScript逻辑 #

点击按钮时，先重置所有按钮的状态，再给当前点击的按钮添加选中状态并设置页面背景色：

const buttons = document.querySelectorAll('.color-btn');

buttons.forEach(btn => {
  btn.addEventListener('click', function() {
    // 1. 重置所有按钮的选中状态
    buttons.forEach(item => {
      item.classList.remove('active');
    });
    // 2. 标记当前按钮为选中状态
    this.classList.add('active');
    // 3. 设置页面背景色
    document.body.style.backgroundColor = this.dataset.color;
  });
});

关键逻辑说明 #

• 用data-color属性存储每个按钮对应的背景色，避免在JS里硬写颜色值，后期修改更方便
• 点击时先遍历所有按钮移除active类，确保同一时间只有一个按钮处于选中状态
• 通过CSS的display属性控制勾选图标的显示，不用手动操作DOM添加/删除图标元素

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