javascript - 选择单选输入时如何更改按钮颜色，但输入包装在标签之前的 div 中？

Question

我正在尝试将我们的小单选按钮变成我们捐赠页面上可爱的切换按钮。 HTML 无法修改，就目前而言，输入被包装在 div 中，然后是标签。我对 JS/jQuery 的了解为零，我想这项任务需要一些知识。

这是我的 fiddle :https://jsfiddle.net/cgz63qhd/

body {
  padding: 10px;
  font-family: sans-serif;
}

div.donation-levels {
  margin: 3px 0;
}

.donation-level-container {
  display: inline-block;
}

.donation-level-container input {
  visibility: hidden;
}

.donation-level-amount-container {
  text-align: center;
  margin: 5px 2px;
  padding: 0.7em 2em;
  color: #ffffff;
  background-color: #1a92b4;
  border-radius: 5px;
  display: inline-block;
  cursor: pointer;
  font-size: 22px;
}

.donation-level-amount-container:hover {
  background: #e8525f;
  color: #ffffff;
}

.donation-level-label-input-container input:checked~label {
  background: #e8525f;
}

<div class="donation-level-container">
  <div class="form-content">

    <div class="donation-level-input-container form-input">

      <div class="donation-level-label-input-container">
        <input name="level_flexibleexpanded" id="level_flexibleexpanded5942" value="5942" onclick="evalMatchingGift('$35.00');" type="radio">
      </div>

      <label for="level_flexibleexpanded5942" onclick="">


    <div class="donation-level-amount-container">
    $35.00
    </div>

    </label>

    </div>

    <input name="level_flexibleexpandedsubmit" id="level_flexible_5942expandedsubmit" value="true" type="hidden">
  </div>
</div>
<div class="donation-level-container">
  <div class="form-content">

    <div class="donation-level-input-container form-input">

      <div class="donation-level-label-input-container">
        <input name="level_flexibleexpanded" id="level_flexibleexpanded5943" value="5943" onclick="evalMatchingGift('$60.00');" type="radio">
      </div>

      <label for="level_flexibleexpanded5943" onclick="">

    <div class="donation-level-amount-container">
    $60.00
    </div>

    </label>

    </div>

    <input name="level_flexibleexpandedsubmit" id="level_flexible_5943expandedsubmit" value="true" type="hidden">
  </div>
</div>
<div class="donation-level-container">
  <div class="form-content">

    <div class="donation-level-input-container form-input">

      <div class="donation-level-label-input-container">
        <input name="level_flexibleexpanded" id="level_flexibleexpanded5944" value="5944" onclick="evalMatchingGift('$120.00');" type="radio">
      </div>

      <label for="level_flexibleexpanded5944" onclick="">

    <div class="donation-level-amount-container">
    $120.00
    </div>

    </label>


    </div>

    <input name="level_flexibleexpandedsubmit" id="level_flexible_5944expandedsubmit" value="true" type="hidden">
  </div>
</div>

这是我的灵感捐赠页面:https://action.audubon.org/donate/now

唉，他们的标签设置得更好，所以我认为他们能够用纯 CSS 制作按钮(？)。

我的按钮目前看起来不错，大小合适，颜色也很好，但点击时它们不会保持珊瑚色!有人可以帮帮我吗？

我在这里看到了很多关于这个主题的问题，但我似乎无法解决任何问题。

我确定代码中还有其他问题，如果看到请指出!

Answer 1

$(".donation-level-amount-container").on("click", function() {
  $('.donation-level-amount-container').each(function() {
      $(this).removeClass('active');
    });    
  $(this).toggleClass('active');
})

和CSS

.active {
  background:#e8525f;
  color:#ffffff; 
}

工作 fiddle : https://jsfiddle.net/29exoa4k/2/