在单选按钮选项上选择不同的div

Question

我默认有三个单选按钮，没有选中它们，并且默认显示“通过选择选项1和2，降低风险。了解更多信息”的消息。

现在，如果我选择选项1，“您无需支付任何超额费用。”应该替换默认文本。

如果我选择选项2或3，“您将每天支付超过[£700（适度）/ 1000（基本）]的额外费用。了解更多”如果我选择选项2将支付700英镑，将支付1000英镑加载，如果我通过替换默认文本选择选项3。

有人能帮助我如何实现它吗？

问候，比尔

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

    <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>
 
<!-- Default Message -->
<div>By selecting option 1 and 2, you reduce risk. <a href="#">Learn more</a></div>
<!-- If I select Premium excess -->
<div>You are not liable to pay any excess fee.</div>
<!-- If I select Moderate excess or Basic excess -->
<div>You will pay an excess of <span class="font-weight-600">up to [£700 (for moderate)/1000 (for basic)]</span> per day. <a href="#">Learn more</a></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">Moderate 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">Basic excess</span>
     <span class="float-right"><span class="protection-reduced-price">FREE</span></span>
     </label>
    </div>
   </div>

Answer 1

首先，我将中等和基本超额消息分开。然后，我为你的多余消息添加了类名。以下是基于您的代码的工作代码段：

$('input:radio[name="optradio"]').change(function(){
    $('.default-message, .excess-message').hide();
    $('.' + $(this).val()).show();
});

.font-weight-600 {
    font-weight: 600;
}
.excess-message {
    display: none;
}

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

<!-- Default Message -->
<div class="default-message">
    By selecting option 1 and 2, you reduce risk.
    <a href="#">Learn more</a>
</div>

<!-- If I select Premium excess -->
<div class="excess-message premium">You are not liable to pay any excess fee.</div>

<!-- If I select Moderate excess -->
<div class="excess-message moderate">
    You will pay an excess of <span class="font-weight-600">up to £700</span> per day.
    <a href="#">Learn more</a>
</div>

<!-- If I select Basic excess -->
<div class="excess-message basic">
    You will pay an excess of <span class="font-weight-600">up to £1000</span> per day.
    <a href="#">Learn more</a>
</div>

<div class="bg-light mb-3">
    <div class="radio">
        <label class="insurance-plan">
            <input type="radio" name="optradio" value="premium">
            <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" value="moderate">
            <span class="insurance-plan-text">Moderate 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" value="basic">
            <span class="insurance-plan-text">Basic excess</span>
            <span class="float-right"><span class="protection-reduced-price">FREE</span></span>
        </label>
    </div>
</div>

Answer 2

一种简单的方法可能是更新HTML标记以将data-option属性添加到您的无线电输入元素，如下所示：

<input type="radio" name="optradio" data-option="1">

这使您可以轻松确定脚本中单击了哪个单选按钮，以便您可以决定向用户显示哪些消息。考虑下面的脚本和HTML，其中消息根据其类显示：

$('.insurance-plan input[type="radio"]').click(function() {
  
  /* Re-hide all messages */
  $("[class^='message']").hide();
  
  /* Extract the option number of this radio button */
  const option = $(this).data('option');
  
  /* Display only the message that should be shown as per the clicked radio button */
  $('.message-' + option).show();

});

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

/* Message 1, 2 and 3 are hidden by default */
.message-1, .message-2, .message-3 {
  display:none;
}

<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>
 
 
<!-- Update markup for messages -->
<div class="message-default">By selecting option 1 and 2, you reduce risk. <a href="#">Learn more</a></div>
<div class="message-1">You are not liable to pay any excess fee.</div>
<div class="message-2">You will pay an excess of <span class="font-weight-600">up to [£700 (for moderate)/1000 (for basic)]</span> per day. <a href="#">Learn more</a></div>
<div class="message-3">You will pay an excess of <span class="font-weight-600">up to [£1000 (for moderate)/1000 (for basic)]</span> per day. <a href="#">Learn more</a></div>

<div class="bg-light mb-3">
 <div class="radio">
  <label class="insurance-plan">
  
    <!-- Add data-message attribute to radio button -->
   <input type="radio" name="optradio" data-option="1">
    <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">
  
    <!-- Add data-message attribute to radio button -->
   <input type="radio" name="optradio" data-option="2">
    <span class="insurance-plan-text">Moderate 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">
  
    <!-- Add data-message attribute to radio button -->
   <input type="radio" name="optradio" data-option="3">
    <span class="insurance-plan-text">Basic excess</span>
     <span class="float-right"><span class="protection-reduced-price">FREE</span></span>
     </label>
    </div>
   </div>

希望有所帮助！