DOM操作实现按钮组互斥选中：仅单个按钮可保持激活状态

问题核心原因 #

原来的实现逻辑只处理了单个按钮自身的样式切换，没有在点击某一个按钮时主动重置其余按钮的状态，同时重复为每个按钮单独编写逻辑，判断条件冗余，自然无法实现单选效果。

优化实现方案 #

我们可以通过「统一事件绑定+样式类控制」的方式简化逻辑，核心思路是：点击任意按钮时，先把所有按钮恢复为默认样式，再给当前点击的按钮设置选中样式，天然保证同一时间只有一个按钮处于选中状态。

完整修改后代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>单选按钮效果</title>
    <style>
        .buttons-for-the-books{
            border: 3px solid #191919;
            background-color: white;
            height:42px;
            margin:auto;
            cursor: pointer;
        }
        /* 新增选中样式类，不用单独修改每个样式属性 */
        .buttons-for-the-books.active{
            background-color: black;
            border: 3px solid white;
            color: white;
        }
    </style>
</head>
<body>
    <div class="center">
        <button class="buttons-for-the-books">Choose that one</button>
        <button class="buttons-for-the-books">Choose that one</button> 
        <button class="buttons-for-the-books">Choose that one</button>
    </div>
    <script>
        // 获取所有目标按钮
        const btns = document.querySelectorAll('.buttons-for-the-books');
        btns.forEach(btn => {
            btn.addEventListener('click', function() {
                // 第一步：清除所有按钮的选中状态
                btns.forEach(b => b.classList.remove('active'));
                // 第二步：给当前点击的按钮添加选中状态
                this.classList.add('active');
            })
        })
    </script>
</body>
</html>

可选扩展 #

如果需要支持点击已选中的按钮取消选中，仅需修改点击逻辑即可：

btn.addEventListener('click', function() {
    const isActive = this.classList.contains('active');
    btns.forEach(b => b.classList.remove('active'));
    if (!isActive) this.classList.add('active');
})

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