Question

我在点击#step-content时克隆了一个名为#btn-addProduct的div。这个div包含了克隆的单选按钮。

我的问题是现在克隆单选按钮而不是两个单选按钮，我们有四个具有相同的name="packaging"。这只允许我从4中选择1个。

我想要的是，当克隆#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>

我用来克隆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

试试这个：

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

请检查我添加了一行更改包装单选按钮名称的行。

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

function outPutPosts(){
 $db= $_GLOBAL['db'];
 return $db->query("select * from replies limit 35"); 
}

当克隆包含单选按钮的div时，jQuery会自动为单选按钮名称添加+1

2 个答案: