Question

默认情况下，我有三个单选按钮，但未选中任何一个，默认情况下会显示一条消息，“选择选项1和2，可降低风险。了解更多信息。”

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

如果我选择选项2或3，“每天您最多要支付[700（中等）/ 1000（基本）的费用。了解更多””如果我选择2和3，则需要支付700英镑如果我通过替换默认文字选择了选项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>

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>

希望有帮助！

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

2 个答案: