1
votes

Comment ajouter et supprimer des données alors que des boutons radio sélectionnés sont sélectionnés?

Bonjour, j'essaie d'ajouter les données et de supprimer les données en fonction du bouton radio sélectionné, mais dans mon cas, tout bouton que j'ai sélectionné, les données seront ajoutées au div.Pouvez-vous s'il vous plaît résoudre le problème que comment ajouter et supprimez les données en fonction du bouton radio sélectionné.

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

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

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

javascript jquery html switch-statement

11 commentaires

utiliser l'événement de changement au lieu de cliquer

@BearNithi je l'ai changé mais ne fonctionne pas

remove icon id $ ('# your id'). click (function () {$ (this) .remove ();});

@Ragupathi je ne comprends pas ce que vous dites

vous voulez dire que si vous avez précédemment sélectionné carré et que vous sélectionnez maintenant bande , vous voulez remplacer le texte ajouté carré par le texte ajouté bande ???

@Elish oui je veux faire ça

Remplacez append par html

@Elish en html puis-je passer les éléments du html?

Oui, vous pouvez. html () accepte une chaîne de html.

@Elish en utilisant le texte existant html dans ne pas supprimer :(

@catter essaie ma solution

4 Réponses :

0
votes

Votre cas de commutateur devrait être comme ça. Cela devrait supprimer les valeurs des autres 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');
    }
  });
});

J'ai mis à jour tous les cas, en fonction de vos boutons radio, vous devriez supprimer les autres valeurs du div.

0 commentaires

0
votes

essayez ceci, cela fonctionne bien pour moi, vous devez supprimer tout le contenu avant d'en ajouter un nouveau

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

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

    }

0 commentaires

0
votes

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

0 commentaires

0
votes

Sory, j'ai mal compris vos exigences dans la section des commentaires. Mais vous pouvez toujours utiliser html () pour effacer tout label.div que vous voulez.

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

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

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

Notez également que vous avez utilisé autorisé.net comme classe pour le div à l'intérieur de votre troisième étiquette . si vous passez ce autorisé.net au sélecteur jquery $ en tant que $ (". authorize.net_fields") , il recherchera des éléments avec les classes autoriser et net_fields par exemple (

) . Vous pouvez donc définir l'attribut de classe pour le div à l'intérieur de votre troisième étiquette comme authorize_net_fields et non authorize.net_fields

0 commentaires