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

Question

默认情况下，我有三个单选按钮，其中一个都未选中，并且默认显示一条消息“通过选择选项 1 和 2，您可以降低风险。了解更多信息”。

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

如果我选择选项 2 或 3，“您每天将支付高达 [£700(中等)/1000(基本)] 的额外费用。了解更多”如果我选择选项 2 和如果我通过替换默认文本选择选项 3，将加载 1000 英镑。

有人能帮我实现吗？

问候，比尔

.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>