基于Bootstrap、Symfony和Twig实现复选框选中时按钮变色

核心思路 #

监听复选框的change事件，当复选框状态改变时，找到它所在的按钮容器（.btn元素），切换btn-outline-secondary和btn-primary类。因为是循环生成的多个按钮，用事件委托能避免重复绑定事件，更高效。

具体实现代码 #

1. Twig循环生成的结构（给复选框加统一类名方便选择）

<div class="btn-group">
    {% for item in items %}
    <div class="btn btn-outline-secondary">
        <div class="form-check">
            <input type="checkbox" class="form-check-input checkbox-btn-trigger">
            <label class="form-check-label">{{ item.name }}</label>
        </div>
    </div>
    {% endfor %}
</div>

2. 原生JavaScript实现（无依赖）

// 用事件委托监听复选框状态变化
document.addEventListener('change', function(e) {
    if (e.target.classList.contains('checkbox-btn-trigger')) {
        const btnElement = e.target.closest('.btn');
        if (btnElement) {
            // 根据复选框状态切换按钮样式类
            if (e.target.checked) {
                btnElement.classList.remove('btn-outline-secondary');
                btnElement.classList.add('btn-primary');
            } else {
                btnElement.classList.add('btn-outline-secondary');
                btnElement.classList.remove('btn-primary');
            }
        }
    }
});

3. 可选：jQuery简化写法

$(document).on('change', '.checkbox-btn-trigger', function() {
    const $btn = $(this).closest('.btn');
    if ($(this).is(':checked')) {
        $btn.removeClass('btn-outline-secondary').addClass('btn-primary');
    } else {
        $btn.addClass('btn-outline-secondary').removeClass('btn-primary');
    }
});

补充说明 #

• closest('.btn')会向上查找最近的.btn父元素，即使结构微调也能精准定位目标按钮。
• 若需要页面加载时根据复选框初始选中状态设置按钮样式，可添加初始化逻辑：

document.addEventListener('DOMContentLoaded', function() {
    document.querySelectorAll('.checkbox-btn-trigger').forEach(checkbox => {
        checkbox.dispatchEvent(new Event('change'));
    });
});

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