如何通过复选框复制div？答案

【问题标题】：How to duplicate div by checking box?如何通过复选框复制div？
【发布时间】：2015-02-22 18:54:34
【问题描述】：

我希望用户能够创建数量不定的问题。一旦用户创建了一个问题，我希望出现另一个问题（问题 2），依此类推..

我该怎么办？

谢谢

【问题讨论】：

你真的需要详细说明一下！
因此，一旦用户在文本框中输入标题和描述，他们就会单击一个文本框来表示其完整，然后下方会出现另一组文本框，以便他们输入第二个问题。输入所有问题后，他们可以单击按钮提交数据
请显示您到目前为止尝试过的代码以及其中哪些部分不起作用。

标签： html duplicates clone replicate

【解决方案1】：

这或多或少是我使用纯 JavaScript 会做的事情（请参阅 cmets 以获得解释）

// Create a copy of a blank Question node
question_template = document.getElementById("questions").firstElementChild.cloneNode(true);
// A nice cloning wrapper
new_question = function(){return question_template.cloneNode(true);};
// Something to do when the user is finished putting in questions
alrt = function(){
    alert(Array.prototype.map.call(document.getElementById(
      "questions").getElementsByTagName("input"),
      function(elt){return elt.value;}));
};
// Hook for when text is placed in textbox
addnew = function(){
    // Remove the event listener (If you don't do this, then on every
    //   keystroke a new box will be created
    document.getElementById("questions").lastElementChild.oninput = function(event){};
    // Add a new line
    document.getElementById("questions").appendChild(document.createElement("br"));
    // Add a new question box
    document.getElementById("questions").appendChild(new_question());
};

<div id="questions">
<input type="text" oninput="addnew()"/>
</div>
<input type="button" value="Done" onclick="alrt()"/>

更新：我刚刚在主要帖子的评论部分看到了您的详细说明。你可以用这样的东西来实现它：

// Create a copy of a blank Question node
question_template = document.getElementById("questions").firstElementChild.cloneNode(true);
// A nice cloning wrapper
new_question = function(){return question_template.cloneNode(true);};
// Something to do when the user is finished putting in questions
alrt = function(){
    alert(Array.prototype.map.call(document.getElementById(
      "questions").getElementsByTagName("input"),
      function(elt){return elt.value;}));
};
// Hook for when text is placed in textbox
addnew = function(){
    // Add a new line
    document.getElementById("questions").appendChild(document.createElement("br"));
    // Add a new question box
    document.getElementById("questions").appendChild(new_question());
};

<div id="questions">
    <input type="text"/>
    </div>
<input type="button" value="Add Another" onclick="addnew()"/>
    <input type="button" value="Done" onclick="alrt()"/>

这可以通过大多数带有正确事件的input 元素来实现。 W3 学校有a nice reference，如果你需要的话。

【讨论】：

【解决方案2】：

在javascript中你可以这样做

var i = 0;

function addMore() {
  i++;
  var parentDiv = document.createElement("div");

  var childLabel = document.createElement("label");
  childLabel.appendChild(document.createTextNode("Enter Value " + i));

  var childTextBox = document.createElement("input");
  childTextBox.type = "text";
  childTextBox.id = "txtInput" + i;

  var childCheckBox = document.createElement("input");
  childCheckBox.type = "checkbox";
  childCheckBox.onchange = addMore;

  parentDiv.appendChild(childLabel);
  parentDiv.appendChild(childTextBox);
  parentDiv.appendChild(childCheckBox);
  document.body.appendChild(parentDiv);

}

<div>
  Add Items
  <input type="checkbox" onchange="addMore()">
</div>

希望有帮助

【讨论】：

【解决方案3】：

你可以试试这样的

HTML

<div class="input-container">
  <input class="question" placeholder="Question" type="text"/>
</div>

<div class="add-option">+</div>

//click the '+' sign
$(".add-option").click(function(){

   //find the first input and clone it then append it to the container
   $(".input-container input:first").clone().appendTo(".input-container");

   //clear any value from the next input had there been any added
   $(".input-container input:last").val("");
});

FIDDLE

更新

我省略了有关复选框的部分，从 UI 的角度来看，我认为您不需要复选框来完成此操作，不确定它是否暗示“已完成，我想继续”，但这取决于您决定。这是一个新的小提琴

HTML

<div class="input-container">
  <input class="question" placeholder="Question" type="text"/>
</div>

<div class="add-option"><input type="checkbox"/></div>

//click the checkbox
$(".add-option input[type=checkbox]").click(function(){

 //find the first input and clone it then append it to the container
 $(".input-container input:first").clone().appendTo(".input-container");

 //clear any value from the next input had there been any added
 $(".input-container input:last").val("");

 //reset the checkbox
 $(this).prop("checked", false);
});

NEW FIDDLE

【讨论】：

非常感谢，重复的文本框的名称是什么？
@JoeTindall 抱歉打字太快：您可以随意命名。您可以在克隆它们时为它们添加唯一的名称或编号，我忽略了有关复选框的部分，我用新的小提琴更新了我的答案
谢谢，真的有帮助！
@JoeTindall 你明白了。很高兴为您提供帮助，您能否将其标记为已解决？

【解决方案4】：

我会这样做：

function addClone() {
    var cloned = document.getElementById('test').cloneNode(true); //clone the element
    document.body.appendChild(cloned); //add the cloned element to the page
}

<div id='test'>iadwjoam</div>
<input type="checkbox" id="xxx" name="xxx" onchange="addClone()" />

cloneNode() - https://developer.mozilla.org/en-US/docs/Web/API/Node.cloneNode

【讨论】：