js实现按钮组

2026-02-02 15:17:18JavaScript

实现按钮组的基本方法

使用HTML和JavaScript创建一个按钮组可以通过多种方式实现。以下是几种常见的方法：

HTML结构

<div class="button-group">
  <button class="btn">按钮1</button>
  <button class="btn">按钮2</button>
  <button class="btn">按钮3</button>
</div>

CSS样式

.button-group {
  display: flex;
  gap: 8px;
}

.btn {
  padding: 8px 16px;
  background-color: #f0f0f0;
  border: 1px solid #ddd;
  cursor: pointer;
}

.btn:hover {
  background-color: #e0e0e0;
}

.btn.active {
  background-color: #007bff;
  color: white;
}

添加交互功能

为按钮组添加点击事件处理，使得每次只有一个按钮保持激活状态：

js实现按钮组

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

buttons.forEach(button => {
  button.addEventListener('click', () => {
    // 移除所有按钮的active类
    buttons.forEach(btn => btn.classList.remove('active'));
    // 为当前点击的按钮添加active类
    button.classList.add('active');
  });
});

使用事件委托优化

对于大量按钮，可以使用事件委托来提高性能：

const buttonGroup = document.querySelector('.button-group');

buttonGroup.addEventListener('click', (e) => {
  if (e.target.classList.contains('btn')) {
    const buttons = buttonGroup.querySelectorAll('.btn');
    buttons.forEach(btn => btn.classList.remove('active'));
    e.target.classList.add('active');
  }
});

动态生成按钮组

通过JavaScript动态创建按钮组：

function createButtonGroup(buttonLabels, containerId) {
  const container = document.getElementById(containerId);
  const group = document.createElement('div');
  group.className = 'button-group';

  buttonLabels.forEach(label => {
    const button = document.createElement('button');
    button.className = 'btn';
    button.textContent = label;
    group.appendChild(button);
  });

  container.appendChild(group);

  // 添加事件监听
  group.addEventListener('click', (e) => {
    if (e.target.classList.contains('btn')) {
      const buttons = group.querySelectorAll('.btn');
      buttons.forEach(btn => btn.classList.remove('active'));
      e.target.classList.add('active');
    }
  });
}

// 使用示例
createButtonGroup(['选项1', '选项2', '选项3'], 'button-container');

单选按钮组实现

实现类似单选按钮的功能，只能选择一个选项：

js实现按钮组

const buttonGroup = document.querySelector('.button-group');
let selectedButton = null;

buttonGroup.addEventListener('click', (e) => {
  if (e.target.classList.contains('btn')) {
    if (selectedButton) {
      selectedButton.classList.remove('active');
    }
    e.target.classList.add('active');
    selectedButton = e.target;
  }
});

获取选中按钮的值

添加功能来获取当前选中的按钮值：

function getSelectedButtonValue() {
  const activeButton = document.querySelector('.btn.active');
  return activeButton ? activeButton.textContent : null;
}

// 可以在按钮点击事件中调用
buttonGroup.addEventListener('click', (e) => {
  if (e.target.classList.contains('btn')) {
    // ...之前的选中逻辑...
    console.log('当前选中:', getSelectedButtonValue());
  }
});

按钮组的可访问性改进

为按钮组添加ARIA属性，提高可访问性：

<div class="button-group" role="group" aria-label="操作按钮组">
  <button class="btn" role="radio" aria-checked="false">选项1</button>
  <button class="btn" role="radio" aria-checked="false">选项2</button>
  <button class="btn" role="radio" aria-checked="false">选项3</button>
</div>

对应的JavaScript更新：

buttonGroup.addEventListener('click', (e) => {
  if (e.target.getAttribute('role') === 'radio') {
    const buttons = buttonGroup.querySelectorAll('[role="radio"]');
    buttons.forEach(btn => {
      btn.setAttribute('aria-checked', 'false');
      btn.classList.remove('active');
    });
    e.target.setAttribute('aria-checked', 'true');
    e.target.classList.add('active');
  }
});