當包含單選按鈕在div克隆

Question

jQuery將自動添加+1的單選按鈕的名字，我有一個名爲#step-content的div被點擊#btn-addProduct的時候，我克隆。這個div包含單選按鈕，它也被克隆。

我的問題是，當單選按鈕被克隆，現在不是我們有四個具有相同name="packaging"兩個單選按鈕。這將只允許我選擇1出4

我要的是，當#step-content克隆克隆單選按鈕應該有a +1添加到它的名字，這將使name="packaging"爲name="packaging1"。

我現有的代碼是：

HTML：

<div class="form-step form-step1"> 
    <p class="step-number">1</p> 
    <div id="step-content" class="step-content"> 

     <select name="product-type" form="cost-form"> 
     <option value="product" selected disabled>Product Type</option> 
     <option value="product1">Product Type 1</option> 
     <option value="product2">Product Type 2</option> 
     <option value="product3">Product Type 3</option> 
     <option value="product4">Product Type 4</option> 
     <option value="product5">Product Type 5</option> 
     </select> 

     <input type="text" name="length" placeholder="Length" /> 
     <span class="x">X</span> 
     <input type="text" name="width" placeholder="Width" /> 
     <span class="x">X</span> 
     <input type="text" name="height" placeholder="Height" /> 
     <input class="weight" type="text" name="weight" placeholder="Weight" /> 

     <div class="packaging"> 
     <label for="packaging">Needs Packaging?</label> 
     <input type="radio" name="packaging" value="yes" checked /> yes 
     <br /> 
     <input type="radio" name="packaging" value="no" /> no 
     </div> 

     <input type="text" class="qty" name="qty" placeholder="QTY" /> 

    </div> 
</div> 
<!-- end form-step --> 

<div class="add-product"> 
    <a id="btn-addProduct"><img src="img/add-product.png" alt="Add Another Product" /></a> <span>Add Another Product</span> 
</div> 

jQuery的，我使用克隆的股利如下：

document.getElementById('btn-addProduct').onclick = duplicate; 

var i = 0; 
var original = document.getElementById('step-content'); 

function duplicate() { 
    var clone = original.cloneNode(true); // "deep" clone 
    clone.id = "step-content" + ++i; // there can only be one element with an ID 
    original.parentNode.appendChild(clone); 
} 

的jsfiddle鏈接：
https://jsfiddle.net/qdryvgw7

Answer 1

ŧ RY這樣的：

function duplicate() { 
    var clone = original.cloneNode(true); // "deep" clone 
    clone.id = "step-content" + ++i; // there can only be one element with an ID 
    original.parentNode.appendChild(clone); 
    //this will change name of the radio buttons under newly created step-content 
    $("#step-content"+ i + " input:radio").attr("name", "packaging"+ i); 
} 

Fiddle

Answer 2

請查看我增加了一個線，正在改變着包裝單選按鈕的名稱。

document.getElementById('btn-addProduct').onclick = duplicate; 
 

 
var i = 0; 
 
var original = document.getElementById('step-content'); 
 

 
function duplicate() { 
 
    var clone = original.cloneNode(true); // "deep" clone 
 
    clone.id = "step-content" + ++i; // there can only be one element with an ID 
 
    
 
    original.parentNode.appendChild(clone); 
 
    $("#" + clone.id).find(".packaging input").each(function() { this.name = this.name + i }); 
 
    
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="form-step form-step1"> 
 
    <p class="step-number">1</p> 
 
    <div id="step-content" class="step-content"> 
 
    <p> 
 
     <select name="product-type" form="cost-form"> 
 
     <option value="product" selected disabled>Product Type</option> 
 
     <option value="product1">Product Type 1</option> 
 
     <option value="product2">Product Type 2</option> 
 
     <option value="product3">Product Type 3</option> 
 
     <option value="product4">Product Type 4</option> 
 
     <option value="product5">Product Type 5</option> 
 
     </select> 
 

 
     <input type="text" name="length" placeholder="Length" /> 
 
     <span class="x">X</span> 
 
     <input type="text" name="width" placeholder="Width" /> 
 
     <span class="x">X</span> 
 
     <input type="text" name="height" placeholder="Height" /> 
 
     <input class="weight" type="text" name="weight" placeholder="Weight" /> 
 

 
     <div class="packaging"> 
 
     <label for="packaging">Needs Packaging?</label> 
 
     <input type="radio" name="packaging" value="yes" checked /> yes 
 
     <br /> 
 
     <input type="radio" name="packaging" value="no" /> no 
 
     </div> 
 

 
     <input type="text" class="qty" name="qty" placeholder="QTY" /> 
 
    </p> 
 
    </div> 
 
</div> 
 
<!-- end form-step --> 
 

 
<div class="add-product"> 
 
    <a id="btn-addProduct"><img src="img/add-product.png" alt="Add Another Product" /></a> <span>Add Another Product</span> 
 
</div>