如何使用jQuery获取按钮值并为点击按钮设置active类

我来给你一步步拆解怎么实现这个需求，代码和解释都安排得明明白白：

核心实现代码 #

如果你的按钮组是页面加载时就存在的，直接用下面的写法就可以：

$('.year-btn').on('click', function(e) {
    // 先移除所有同组按钮的active类，确保只有当前点击的按钮处于激活状态
    $('.year-btn').removeClass('active');
    // 给当前被点击的按钮添加上active类
    $(this).addClass('active');
    // 获取按钮的文本内容（也就是你要的"取值"），trim()用来清理首尾可能存在的空白字符
    const selectedValue = $(this).text().trim();
    
    // 这里可以根据你的需求做后续处理，比如打印到控制台查看结果
    console.log('你选中的选项是：', selectedValue);
});

动态按钮组的兼容写法 #

要是你的按钮组是动态生成的（比如通过AJAX加载、后续JS渲染出来的），上面的直接绑定会失效，这时候就得用事件委托的方式：

// 把事件绑定到父级或document上，确保后续动态添加的按钮也能触发点击逻辑
$(document).on('click', '.year-btn', function(e) {
    $('.year-btn').removeClass('active');
    $(this).addClass('active');
    const selectedValue = $(this).text().trim();
    console.log('你选中的选项是：', selectedValue);
});

关键步骤说明 #

• 绑定点击事件：通过$('.year-btn').on('click', ...)给所有目标按钮绑定点击触发的函数；
• 切换active类：先移除所有按钮的active类，再给当前点击的按钮加上，避免多个按钮同时处于激活状态；
• 获取按钮取值：用.text()获取按钮上的文本内容，trim()是为了清理可能存在的首尾空格，保证拿到的内容干净准确。

另外提一句：你的按钮组已经带有Bootstrap的data-toggle="buttons"属性，原生Bootstrap其实会自动处理active类的切换，但如果需要同时获取选中值做其他业务逻辑，上面的jQuery代码就能完美配合使用~

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