javascript - JQuery:单击单选按钮时如何在 HTML 中打印值？

Question

我有三个单选按钮，它们的相关值为 40 英镑、30 英镑、50 英镑。我想要 <p> 中的文字动态更新以显示已单击的单选按钮的值。

我如何使用 JQuery 做到这一点？这是我的代码:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<div class="bg-light mb-3">
  <div class="radio">
    <label class="insurance-plan">
                                     <input type="radio" name="optradio">
                                     <span class="insurance-plan-text">Basic excess</span>
                                     <span class="float-right"><span class="protection-reduced-price">£40.00</span><span class="protection-reduced-day">/day</span></span>

                                     </label>

  </div>
</div>

<div class="bg-light mb-3">
  <div class="radio">
    <label class="insurance-plan">
                                     <input type="radio" name="optradio">
                                     <span class="insurance-plan-text">Premium excess</span>
                                     <span class="float-right"><span class="protection-reduced-price">£30.00</span><span class="protection-reduced-day">/day</span></span>

                                     </label>

  </div>
</div>

<div class="bg-light mb-3">
  <div class="radio">
    <label class="insurance-plan">
                                     <input type="radio" name="optradio">
                                     <span class="insurance-plan-text">Premium excess</span>
                                     <span class="float-right"><span class="protection-reduced-price">£50.00</span><span class="protection-reduced-day">/day</span></span>

                                     </label>

  </div>
</div>

<p>You will pay an excess of [£30/40] per day.</p>

Answer 1

使用 jQuery，您可以通过以下方式实现此目的(有关详细信息，请参阅代码片段中的注释):

/* Attach click handler to radio input of each .insurance-plan */
$('.insurance-plan input[type="radio"]').click(function() {

  /* When the radio button is clicked, get it's parent element */
  const insurancePlanElement = $(this).parent();

  /* Get the .protection-reduced-price of this buttons .insurance-plan */
  const priceElement = $('.protection-reduced-price', insurancePlanElement).first();

  /* Create learn more link  */
  const learnMoreLink = $('<a>', {
      href: "someurl.com"
    })
    .text('Click here to learn more');

  /* Create span with HTML of print message */
  const message = $('<span>')
    .html("You will pay an excess of <span class='font-weight-600'>" +
      priceElement.text() +
      "</span> per day.")

  /* Update the print wrapper's element content */
  $('#printMessage')
    .empty()
    .append(message)
    .append(learnMoreLink)
});

.font-weight-600 {
  font-weight: 600;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="bg-light mb-3">
  <div class="radio">
    <label class="insurance-plan">
      <input type="radio" name="optradio">
      <span class="insurance-plan-text">Basic excess</span>
      <span class="float-right"><span class="protection-reduced-price">£40.00</span><span class="protection-reduced-day">/day</span></span>
    </label>
  </div>
</div>

<div class="bg-light mb-3">
  <div class="radio">
    <label class="insurance-plan">
      <input type="radio" name="optradio">
      <span class="insurance-plan-text">Premium excess</span>
      <span class="float-right"><span class="protection-reduced-price">£30.00</span><span class="protection-reduced-day">/day</span></span>
</label>
  </div>
</div>

<div class="bg-light mb-3">
  <div class="radio">
    <label class="insurance-plan">
      <input type="radio" name="optradio">
      <span class="insurance-plan-text">Premium excess</span>
      <span class="float-right"><span class="protection-reduced-price">£50.00</span><span class="protection-reduced-day">/day</span></span> 
     </label>
  </div>
</div>
<p id="printMessage">
  <span>Please select an option.</span>
</p>

更新

更新脚本以包含“了解更多”链接和粗体价格值