將字體真棒圖標應用於切換按鈕

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>