Formulaires d’amorçage: Comment créer dynamicment des noms uniques pour les boutons radio

Cette question fait suite à celle- ci .

Ce JSfiddle illustre ce que je veux réaliser.

Solution finale fournie par @Scaramouche

La fonction ci-dessous crée une “liste” de manière dynamic avec des boutons radio par groupe de quatre.

Chacun de ces groupes doit avoir un nom unique, ce qui permet de choisir l’une des options tout en permettant de choisir d’autres options dans les autres “groupes”. Ce qui en fait un défi, c’est que cette “liste” est construite avec des formulaires Bootstrap. Comment puis-je créer ces noms de manière dynamic? Cela peut être fait avec Vue ou avec JavaScript (indifféremment là-bas).

HTML sur JSfiddle

       Question: 
    
 
   Enter avaible options: 
 
       
 
       
 
       
 
       
 
   
    Add Question  Save Test

JavaScript

 $("body").on('click', '#radioAddQuestion', function () { let singleQuestionModule = "singleQuestionModule"; let question = $(".module:first").html(); let question_label = $(".question-label:first").html(); $(question_label).insertBefore(".options-label"); $(question).insertBefore(".options-label"); });

Utilisez un compteur pour modifier le nom du groupe suivant. .clone() également changé .html() en .clone() .html() pour .clone() une copie de l’élément entier au lieu de son contenu.

https://jsfiddle.net/DTcHh/60016/

L’astuce consiste à rechercher le dernier .module ajouté. Maintenant, en utilisant .html() pour insérer les nouveaux champs, vous n’avez pas cette span .clone() … Utilisez .clone() plutôt .clone() . Il sera plus facile de cibler le balisage nouvellement ajouté.

Ensuite, en utilisant une variable pour compter les événements de click … Vous pouvez créer un id unique.

 var n=0; $("body").on('click', '#radioAddQuestion', function () { // Counter. n++; var singleQuestionModule = "singleQuestionModule"; var question = $(".module:first").clone(); var question_label = $(".question-label:first").html(); $(question_label).insertBefore(".options-label"); console.log(question_label); // Undefined in this example... $(question).insertBefore(".options-label"); console.log(question.html()); // Add "_" and a number to the ids. $(document).find(".module:last").find("input[type='radio']").each(function(){ $(this).attr("id",$(this).attr("id")+"_"+n); }); });

Votre violon mis à jour .