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

您的开关盒应该是这样的。它应该从其他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 2

尝试一下，对我来说很好，您必须在添加新内容之前删除所有内容

from google.colab import files
dataset_file_dict = files.upload()

html

 $(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();

    }

Answer 3

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

Answer 4

很抱歉，我在评论部分误解了您的要求。但是您仍然可以使用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>

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

选择特定的选定单选按钮时，如何添加和删除数据？

4 个答案: