如何用原生JavaScript实现CSS网格布局按钮的单选功能？

当然可以用原生JavaScript搞定这个需求！完全不需要依赖jQuery，下面我会一步步给你讲清楚怎么实现和CSS一致的网格布局，以及核心的单选功能：

其实网格布局的核心还是靠CSS（毕竟CSS本来就是负责样式布局的），但如果需要用原生JS动态生成这24个按钮元素，我们可以这么做：

首先先写好CSS的网格样式（和你原来的代码对齐就行，这里给个示例）：

.button-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr); /* 6列，24个按钮刚好4行 */
  gap: 8px;
  padding: 16px;
  max-width: 600px;
  margin: 0 auto;
}

.grid-button {
  padding: 12px;
  border: none;
  border-radius: 4px;
  background: #e0e0e0;
  cursor: pointer;
  transition: background 0.2s;
  font-size: 14px;
}

.grid-button.selected {
  background: #2196F3;
  color: white;
}

然后用原生JS动态生成按钮并挂载到页面：

// 获取网格容器
const gridContainer = document.querySelector('.button-grid');

// 循环生成24个按钮
for (let i = 1; i <= 24; i++) {
  const button = document.createElement('button');
  button.className = 'grid-button';
  button.textContent = `按钮 ${i}`;
  // 绑定点击事件，后面处理单选逻辑
  button.addEventListener('click', handleButtonClick);
  gridContainer.appendChild(button);
}

如果你的按钮是静态写在HTML里的，这一步可以跳过，直接给现有按钮绑定点击事件就行。

核心逻辑很简单：点击任意按钮时，先移除所有按钮的选中状态，再给当前点击的按钮加上选中状态。代码如下：

// 可选：存储当前选中的按钮值
let selectedButton = null;

function handleButtonClick(e) {
  // 获取所有网格按钮
  const allButtons = document.querySelectorAll('.grid-button');
  // 移除所有按钮的选中样式
  allButtons.forEach(btn => btn.classList.remove('selected'));
  // 给当前点击的按钮添加选中样式
  const currentBtn = e.target;
  currentBtn.classList.add('selected');
  // 更新选中记录
  selectedButton = currentBtn.textContent;
  console.log('当前选中:', selectedButton);
}

如果需要存储更自定义的值（比如ID、选项值），可以给按钮加data-*属性：

<!-- 静态按钮示例 -->
<button class="grid-button" data-value="option_1">按钮1</button>

然后在事件里获取：

selectedButton = currentBtn.dataset.value;

把所有代码整合起来，直接就能用：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>原生JS网格单选按钮</title>
  <style>
    .button-grid {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 8px;
      padding: 16px;
      max-width: 600px;
      margin: 20px auto;
    }

    .grid-button {
      padding: 12px;
      border: none;
      border-radius: 4px;
      background: #e0e0e0;
      cursor: pointer;
      transition: background 0.2s ease;
      font-size: 14px;
    }

    .grid-button:hover {
      background: #bdbdbd;
    }

    .grid-button.selected {
      background: #2196F3;
      color: white;
    }
  </style>
</head>
<body>
  <div class="button-grid"></div>

  <script>
    const gridContainer = document.querySelector('.button-grid');
    let selectedButton = null;

    // 生成24个按钮
    for (let i = 1; i <= 24; i++) {
      const button = document.createElement('button');
      button.className = 'grid-button';
      button.textContent = `按钮 ${i}`;
      button.addEventListener('click', handleButtonClick);
      gridContainer.appendChild(button);
    }

    function handleButtonClick(e) {
      const allButtons = document.querySelectorAll('.grid-button');
      allButtons.forEach(btn => btn.classList.remove('selected'));
      const currentBtn = e.target;
      currentBtn.classList.add('selected');
      selectedButton = currentBtn.textContent;
      console.log('当前选中按钮:', selectedButton);
    }
  </script>
</body>
</html>

• 初始默认选中：如果需要页面加载时默认选中某个按钮，只需要在生成按钮后，手动给目标按钮添加selected类，或者调用它的click()方法
• 性能优化：如果按钮数量很多，可以把allButtons的查询缓存起来，不用每次点击都重新查询，比如在初始化时就获取一次：

  const allButtons = document.querySelectorAll('.grid-button');
  function handleButtonClick(e) {
    allButtons.forEach(btn => btn.classList.remove('selected'));
    e.target.classList.add('selected');
  }
  

这样就完全用原生JS实现了你的需求，没有任何外部依赖，运行速度快，体积也小～

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