如何在选择特定选定单选按钮时附加和删除数据？

Question

您好，我正在尝试根据选择的单选按钮添加数据并删除数据，但在我的情况下，我选择的任何按钮都将附加到 div 中，您能否解决如何添加的问题并根据选中的单选按钮删除数据。

$( document ).ready(function() {    
        $(".paymethod").on("click", function(){
            paymentMethod = $(this).val();
            switch(paymentMethod){
                case "stripe":
                $(".stripe_fields").append("stripe appended text.");
                break;
                case "square":
                $(".square_fields").append("Square appended text.");
                break;
                case "authorize.net":
                $(".authorize.net_fields").append("Authorize appended text.");
                break;
                case "paypal":
                $(".paypal_fields").append("Paypal appended text.");
                break;
                default:
                alert("select a payment method");
            }
        });
    });

  label{
                display: inline-block;
            }
            label:hover{
                cursor:pointer;
            }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
            <label>
                <input type="radio" class="paymethod" name="radio" value="square">square
                <div class="square_fields"></div>
            </label>
            <label>
                <input type="radio" class="paymethod" name="radio" value="stripe">stripe
                <div class="stripe_fields"></div>
            </label>
            <label>
                <input type="radio" class="paymethod" name="radio" value="authorize.net">authorize.net
                <div class="authorize.net_fields"></div>
            </label>
            <label>
                <input type="radio" class="paymethod" name="radio" value="paypal">paypal
                <div class="paypal_fields"></div>
            </label>
        </form>

Answer 1

抱歉，我在评论部分误解了您的要求。但是您仍然可以使用html() 清除您想要的所有label.div。

$( document ).ready(function() {    
        $(".paymethod").on("click", function(){
            paymentMethod = $(this).val();
$(this).parent().siblings('label').children('div').html('');
            switch(paymentMethod){
                case "stripe":
                $(".stripe_fields").append("stripe appended text.");
                break;
                case "square":
                $(".square_fields").append("Square appended text.");
                break;
                case "authorize.net":
                $(".authorize_net_fields").append("Authorize appended text.");
                break;
                case "paypal":
                $(".paypal_fields").append("Paypal appended text.");
                break;
                default:
                alert("select a payment method");
            }
        });
    });

  label{
                display: inline-block;
            }
            label:hover{
                cursor:pointer;
            }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
            <label>
                <input type="radio" class="paymethod" name="radio" value="square">square
                <div class="square_fields"></div>
            </label>
            <label>
                <input type="radio" class="paymethod" name="radio" value="stripe">stripe
                <div class="stripe_fields"></div>
            </label>
            <label>
                <input type="radio" class="paymethod" name="radio" value="authorize.net">authorize.net
                <div class="authorize_net_fields"></div>
            </label>
            <label>
                <input type="radio" class="paymethod" name="radio" value="paypal">paypal
                <div class="paypal_fields"></div>
            </label>
        </form>

还请注意，您在第三个 lable 中使用了 authorized.net 作为 div 的类。如果您将此 authorized.net 传递给 jquery 选择器 $ 作为 $(".authorize.net_fields") 它将搜索具有类 authorize 和 net_fields 的元素 例如（<div class="authorize net_fields"></div>）。因此，您可以将第三个 label 中的 div 的类属性设置为 authorize_net_fields 而不是 authorize.net_fields

Answer 2

你的开关盒应该是这样的。它应该从其他 div 中删除值。

 $(document).ready(function() {
  $('.paymethod').on('click', function() {
    paymentMethod = $(this).val();
    switch (paymentMethod) {
      case 'stripe':
        $('.stripe_fields').html('stripe appended text.');
        $('.square_fields').html('');
        $('.authorize').html('');
        $('.paypal_fields').html('');
        break;
      case 'square':
        $('.square_fields').html('Square appended text.');
        $('.stripe_fields').html('');
        $('.authorize').html('');
        $('.paypal_fields').html('');
        break;
      case 'authorize.net':
        $('.authorize.net_fields').html('Authorize appended text.');
        $('.stripe_fields').html('');
        $('.square_fields').html('');
        $('.paypal_fields').html('');
        break;
      case 'paypal':
        $('.paypal_fields').html('Paypal appended text.');
        $('.stripe_fields').html('');
        $('.square_fields').html('');
        $('.authorize').html('');
        break;
      default:
        alert('select a payment method');
    }
  });
});

我已经更新了所有情况，根据您的单选按钮，您应该从 div 中删除其他值。

Answer 3

试试这个，它对我来说很好用，你必须在添加新内容之前删除所有内容

 $(document).ready(function () {
        $(".paymethod").on("click", function () {
            paymentMethod = $(this).val();
            RemoveOthers();
            switch (paymentMethod) {
                case "stripe":
                    $(".stripe_fields").append("stripe appended text.");
                    break;
                case "square":
                    $(".square_fields").append("Square appended text.");
                    break;
                case "authorize.net":
                    $(".authorize_net_fields").append("Authorize appended text.");
                    break;
                case "paypal":
                    $(".paypal_fields").append("Paypal appended text.");
                    break;
                default:
                    alert("select a payment method");
            }
        });
});
    function RemoveOthers(){
        $(".stripe_fields").empty();
        $(".square_fields").empty();
        $(".authorize_net_fields").empty();
        $(".paypal_fields").empty();

    }

html

 <div class="authorize_net_fields"></div>

Answer 4

$(document).ready(function(){ 
    $('.paymethod').on('change',function (){
        paymentMethod = $(this).val();
        $("form div").html("");
        $(this).siblings().html(paymentMethod + " appended text.");
    });
});