使用jQuery切换单选按钮的Bootstrap CSS类及实现选中hover效果

问题背景 #

刚接触jQuery，现有3个单选按钮，默认第三个选中。需求：

• 未选中按钮用btn-outline-*轮廓类，选中时切换为btn-*实心类
• 选中按钮保持hover效果
• 避免硬编码大量if语句，解决点击新按钮后旧选中按钮不恢复样式的问题

优化思路 #

1. 用数据属性存储每个按钮对应的样式类，实现通用逻辑，无需针对每个ID写判断
2. 初始化时自动处理默认选中的按钮样式
3. 点击时先重置同组所有按钮为未选中样式，再给当前选中按钮应用选中样式
4. 补充CSS确保选中按钮的hover效果

代码实现 #

1. HTML调整（添加数据属性） #

给每个label标签添加data-outline-class和data-solid-class，分别存储轮廓类和实心类：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<div class="custom-control-inline">
  <label class="btn btn-outline-success" id="radio1" for="customRadioInline1" data-outline-class="btn-outline-success" data-solid-class="btn-success">
        <input type="radio" id="customRadioInline1" name="status" value="Seriös" class="custom-control-input" />
        BUTTON1
    </label>
</div>
<div class="custom-control-inline">
  <label class="btn btn-outline-secondary" id="radio2" for="customRadioInline2" data-outline-class="btn-outline-secondary" data-solid-class="btn-secondary">
        <input type="radio" id="customRadioInline2" name="status" value="Hotline" class="custom-control-input" />
        BUTTON2</label>
</div>
<div class="custom-control-inline">
  <label class="btn btn-outline-info" id="radio3" for="customRadioInline3" data-outline-class="btn-outline-info" data-solid-class="btn-info">
        <input type="radio" id="customRadioInline3" name="status" value="Neutral" checked="checked" class="custom-control-input" />
        BUTTON3</label>
</div>

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

2. 通用jQuery代码 #

无需硬编码ID，通过数据属性动态切换类，同时处理初始化和点击事件：

// 初始化默认选中的按钮
$('input[name="status"]:checked').closest('label').each(function() {
  const $label = $(this);
  $label.removeClass($label.data('outline-class')).addClass($label.data('solid-class'));
});

// 点击事件处理
$('label').click(function() {
  const $currentLabel = $(this);
  const radioName = $currentLabel.find('input').attr('name');
  
  // 重置同组所有按钮为未选中样式
  $(`input[name="${radioName}"]`).closest('label').each(function() {
    const $label = $(this);
    $label.removeClass($label.data('solid-class')).addClass($label.data('outline-class'));
  });
  
  // 给当前选中按钮应用选中样式
  $currentLabel.removeClass($currentLabel.data('outline-class')).addClass($currentLabel.data('solid-class'));
});

3. 补充CSS（确保选中按钮hover效果） #

Bootstrap的实心按钮本身有hover样式，若需要强化选中状态的hover效果，可添加：

/* 自定义选中按钮hover效果 */
.btn-success:hover, .btn-secondary:hover, .btn-info:hover {
  filter: brightness(90%);
}

效果说明 #

• 初始化时默认选中的按钮自动切换为实心类
• 点击任意按钮时，同组其他按钮自动恢复轮廓类，当前按钮切换为实心类
• 所有实心按钮（选中状态）保持Bootstrap原生hover效果，也可通过CSS自定义

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