Bootstrap按钮激活状态设置问题：点击联动输入与手动编辑清除

需求 #

• 点击按钮时，该按钮变为激活状态，同时把按钮的data值同步到输入框
• 手动修改输入框内容后，所有按钮的激活状态自动移除

现有代码问题 #

• 第一个版本：未给输入框添加监听事件，手动修改输入框时按钮激活状态不会消失
• 第二个版本：使用了{ once: true }选项，输入框的监听仅生效一次，且每次点击按钮都重复绑定事件，导致后续按钮切换失效

正确实现代码 #

HTML（按钮部分保持不变） #

<div class="container-md" style="margin-bottom: 4px">
    <div class="row justify-content-center align-items-center">
        <div class="col-auto">
            <button type="button" class="btn btn-outline-primary btn-sm" data="ABC" 
                onclick="filterTable(this)" style="margin-bottom: 4px;">
                ABC
            </button>
            <button type="button" class="btn btn-outline-primary btn-sm" data="DEF" 
                onclick="filterTable(this)" style="margin-bottom: 4px;">
                DEF
            </button>
            <button type="button" class="btn btn-outline-primary btn-sm" data="GHI" 
                onclick="filterTable(this)" style="margin-bottom: 4px;">
                GHI
            </button>
        </div>
    </div>
</div>
<!-- 对应输入框示例 -->
<input class="form-control form-control-sm" type="search" placeholder="搜索">

JavaScript #

// 提前获取元素，减少重复DOM查询
const searchInput = document.querySelector('.form-control.form-control-sm[type="search"]');
const buttons = document.querySelectorAll('button[data]');

// 给输入框绑定一次input事件，监听手动输入行为
searchInput.addEventListener('input', () => {
    buttons.forEach(btn => btn.classList.remove('active'));
});

function filterTable(button) {
    // 清除所有按钮的激活状态
    buttons.forEach(btn => btn.classList.remove('active'));
    // 给当前点击的按钮添加激活状态
    button.classList.add('active');
    // 同步按钮的data值到输入框
    searchInput.value = button.getAttribute('data');
    // 触发输入框input事件（若有依赖该事件的其他逻辑）
    searchInput.dispatchEvent(new Event('input'));
}

代码说明 #

1. 提前获取输入框和目标按钮元素，提升代码执行效率
2. 输入框的input事件仅绑定一次，避免重复绑定引发的逻辑混乱
3. 点击按钮时先统一清除所有激活状态，再为当前按钮添加状态，确保始终只有一个激活按钮
4. 触发输入框的input事件，保证依赖该事件的其他筛选逻辑能正常触发

内容的提问来源于stack exchange，提问作者Ondřej Čejka