引导表单：如何为单选按钮动态创建唯一名称答案

【问题标题】：Bootstrap forms: How to dynamically create unique names for radio buttons引导表单：如何为单选按钮动态创建唯一名称
【发布时间】：2018-09-13 01:25:13
【问题描述】：

这个问题是这个one的后续问题。

这个JSfiddle 体现了我想要实现的目标。

最终的Solution 由@Scaramouche 提供

下面的函数动态地建立一个“列表”，其中包含四个一组的单选按钮。

每个组都应该有一个唯一的名称，这样可以选择其中一个选项，同时仍然可以选择其他“组”中的其他选项。使这成为一个挑战的原因是这个“列表”是用 Bootstrap 表单构建的。如何动态创建这些名称？这可以使用 Vue 或 JavaScript（没有偏好）来完成。

HTML 在JSfiddle

<div id="singleQuestionModule">
    <form class="form-group">
        <div class="d-flex justify-content-center">
            <fieldset class="form-group row">
                <span class="module">
                    <legend class="col-form-legend col-sm-10"></legend>
                    <div class="input-group input-group">
                        <label id="wQuestionLabel" class="form-control-label" style="width: 540px;" for="wQuestion">Question:</label>

                    </div>
                    <div class="form-group row">
                        <div class="input-group input-group">
                            <input type="text" class="form-control" aria-label="" id="wQuestion" style="width: 540px;">
                        </div>
                    </div>
                    <div class="form-group row">
                        <div class="input-group input-group">
                            <label id="questionOptions" class="form-control-label" style="width: 540px;"
                                   for="wQuestion">Enter
                                avaible options:</label>
                        </div>
                    </div>

                    <div class="form-group row">
                        <div class="input-group input-group">
                  <span class="input-group-addon">
                    <input type="radio" name= "q" id="option1" aria-label="">
                  </span>
                            <input type="text" class="form-control" aria-label="" style="width: 540px;">
                        </div>
                    </div>

                    <div class="form-group row">
                        <div class="input-group input-group">
                  <span class="input-group-addon">
                    <input type="radio" name="q" id="option2" aria-label="">
                  </span>
                            <input type="text" class="form-control" aria-label="" style="width: 540px;">
                        </div>
                    </div>

                    <div class="form-group row">
                        <div class="input-group input-group">
                  <span class="input-group-addon">
                    <input type="radio" name="q" id="option3" aria-label="">
                  </span>
                            <input type="text" class="form-control" aria-label="" style="width: 540px;">
                        </div>
                    </div>
                    <div class="form-group row">
                        <div class="input-group input-group">
                  <span class="input-group-addon">
                    <input type="radio" name="q" id="option4" aria-label="">
                  </span>
                            <input type="text" class="form-control" aria-label="" style="width: 540px;">
                        </div>
                    </div>
                </span>
                <span class="options-label"></span>
                <br>
                <div class="form-group row">
                    <div class="btn-group" data-toggle="buttons">
                        <label class="btn btn-success" id="radioAddQuestion">
                            <input type="radio" @click="counter += 1" name="options" autocomplete="off">Add Question</label>

                        <label class="btn btn-success">
                            <input type="radio" name="options" id="radioSaveTest" value="saveTest()" autocomplete="off">Save
                            Test </label>
                    </div>
                </div>
            </fieldset>
        </div>
    </form>
</div>

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

});

【问题讨论】：

标签： jquery vue.js bootstrap-4

【解决方案1】：

使用计数器修改下一组的名称。还将 .html() 更改为 .clone() 以使用整个元素的副本，而不仅仅是其内容。

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

【讨论】：

非常简洁易懂的解决方案！
现在新的 div 是最先出现的，它们正在推动其他 div。我想在最后一个之后有克隆的 div，所以第一个问题是最重要的！我该怎么做？
@josefdev 你改变了什么吗？在jsfiddle.net/DTcHh/60016 中，每次添加span.module 时，它都会添加到最后，就在options-label 之前。我注意到，这可能是在欺骗你的是，作为第一个的克隆，它出现的数据与第一个相同，这可能会导致它是第一个的印象，但事实并非如此，它们都被添加在末尾。添加另一个后，尝试更改每个新输入的内容和无线电，您会明白我的意思。您可以通过每次添加新的span 时清理所有输入来解决此问题
@Scaramouce 感谢您为我指明正确的方向！

【解决方案2】：

诀窍是寻找最后添加的.module。现在，使用.html() 插入新字段，你没有这个包装span...所以改用.clone()。定位新添加的标记会更容易。

然后，使用变量来计算click 事件...您可以创建唯一的id。

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

你的updated Fiddle。

【讨论】：