如何实现多按钮点击保留边框的多选效果？现有单选实现的高效替代方案探讨

原代码的问题分析 #

你当前的代码是单选逻辑：每次点击新按钮时，都会先找到之前选中的按钮并移除它的checked类，这就是为什么只能保留一个按钮的边框。要实现多选，我们只需要修改点击事件的逻辑——不用管其他按钮的状态，只操作当前被点击的按钮即可。

优化后的高效方案 #

这个方案更简洁、性能更好，因为不需要每次点击都去DOM中查询已选中的元素，只专注于当前点击的按钮：

JavaScript 代码

const btnPlaces = document.querySelectorAll('.btn-places');
// 用forEach遍历按钮，替代传统for循环，代码更易读
btnPlaces.forEach(btn => {
  btn.addEventListener('click', function() {
    // 切换当前按钮的checked类：点击选中，再点击取消选中
    this.classList.toggle('checked');
  });
});

可选调整：如果只允许选中、不允许取消

如果你希望按钮一旦点击就一直保留边框（不能取消选中），只需要把toggle换成add即可：

btn.addEventListener('click', function() {
  this.classList.add('checked');
});

原有CSS和HTML无需修改 #

你的CSS和HTML部分完全可以继续使用：

.checked {
  border: 3px solid rgb(34, 34, 34);
}

<button class="btn-places" id="berlin">BERLIN</button>
<button class="btn-places" id="netherlands">NETHERLANDS</button>
<button class="btn-places" id="sweden">SWEDEN</button>
<button class="btn-places" id="italy">ITALY</button>

方案优势 #

• 更高效：避免了每次点击都去DOM中查询.checked元素的操作，减少了DOM访问次数
• 更简洁：使用forEach替代传统for循环，代码结构更清晰，可读性更强
• 逻辑灵活：toggle方法天然支持“选中/取消选中”的切换，符合大多数多选场景的需求

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