将字体真棒图标应用于切换按钮

Question

我想在引导程序中为当前切换按钮添加一个 Font Awesome ( <i class="fas fa-check-circle text-white"></i> ) Check icon 。

我有两个按钮，否或是。

<div class="btn-group btn-group-toggle" data-toggle="buttons">
 <label class="btn btn-dark active">
  <input type="radio" name="options" id="option1" autocomplete="off" checked> No
 </label>
 <label class="btn btn-success">
  <input type="radio" name="options" id="option2" autocomplete="off"> Yes
 </label>
</div>

当点击“否”或“是”时，我想像这样添加图标：

<input type="radio" name="options" id="option2" autocomplete="off"><i class="fas fa-check-circle text-white"></i> Yes

——

主要问题是我将有 10 个以上的“按钮组”，我找不到一种有效的方法来做我需要的事情。 jQuery 是首选但不是必需的。

Answer 1

我实际上刚刚找到了一种简单的方法来实现这一目标。 留下这篇文章以防其他人正在寻找类似的东西。

这是具有多个按钮组的示例。

<div class="btn-group btn-group-toggle j_group" data-toggle="buttons">
  <label class="btn btn-secondary active j_btn">
  <input type="radio" name="options" autocomplete="off" checked> <span class="j_label">No</span>
  </label>
  <label class="btn btn-success j_btn">
    <input type="radio" name="options" autocomplete="off"> <span class="j_label">Yes</span>
  </label>
</div>

<div class="btn-group btn-group-toggle j_group" data-toggle="buttons">
  <label class="btn btn-secondary active j_btn">
  <input type="radio" name="options2" autocomplete="off" checked> <span class="j_label">No</span>
  </label>
  <label class="btn btn-success j_btn">
    <input type="radio" name="options2" autocomplete="off"> <span class="j_label">Yes</span>
  </label>
</div>

<script>
$(document).on("click", ".j_btn", function() {
  btnClicked=this;
  $(btnClicked).parent().find('.j_icon').remove();
  btnOrigialLabel=$(btnClicked).find('.j_label').html();
  $(btnClicked).find('.j_label').html('<i class="fas fa-check-circle j_icon"></i> ' + btnOrigialLabel);
});
</script>