Question

我正在点击我正在克隆div的invoices/(order|membership)/[0-9]{5,}-[a-f0-9]{8}。在div我有两个同名的单选按钮。

现在问题是当我选择一个无线电选项并克隆div时，接下来的两个单选按钮具有相同的名称，并且从最后一个div中选择的单选按钮未被选中。

＆＃13;

<a>

＆＃13;

$('.addMore').on('click', function() {
  $('.addMoreDiv:last').clone().insertAfter('.addMoreDiv:last');
})

＆＃13;

我尝试根据长度更新名称，但在添加div后没有工作并命名更新。

是否有任何选项，以便当我添加新的div时，它会带有不同的名称，最后一个div的选择也不会生效？

Answer 1

正如@sailens所建议的那样;我们需要更改无线电组的name，以便将其视为全新的单选按钮组。我们可以通过以下方式实现它：

＆＃13;

var count = 0;
$('.addMore').on('click', function() {
  var clonedDiv = $('.addMoreDiv:last').clone();
  clonedDiv.find("input[type=radio]").each(function(){
    $(this).attr("name","optradio_"+count);
  });
  count++;
  clonedDiv.insertAfter('.addMoreDiv:last');
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="addMoreDiv">
  <label>
    <input type="radio" name="optradio">Radio 1
  </label>
  <label>
    <input type="radio" name="optradio">Radio 2
  </label>
</div>

<a href="#" class="addMore">Add More</a>

＆＃13;

Answer 2

＆＃13;

$('.addMore').on('click', function() {
  $('.addMoreDiv:last').clone().insertAfter('.addMoreDiv:last');
  $('.addMoreDiv').each(function(i, v) {
    $(this).find('input').attr('name', 'optradio' + i)

  })
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="addMoreDiv">
  <label>
    <input type="radio" name="optradio">Radio 1
  </label>
  <label>
    <input type="radio" name="optradio">Radio 2
  </label>
</div>

<a href="#" class="addMore">Add More</a>

＆＃13;

克隆并插入后，遍历所有div并找到输入并更改attr name这将使每个div上的单选按钮彼此分开

Answer 3

找到以下代码

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="addMoreDiv">
  <label>
    <input type="radio" name="optradio">Radio 1
  </label>
  <label>
    <input type="radio" name="optradio">Radio 2
  </label>
</div>

<a href="#" class="addMore">Add More</a>

创建具有不同无线电名称的新div的脚本：

$('.addMore').on('click', function() {
  // total number of div's, to create unique name for `radio`
  var n = $('.addMoreDiv').length;
  var lastdiv = $('.addMoreDiv:last');
  var newdiv = lastdiv.clone();

  // changing the name for `radio`
  newdiv.find('input[type="radio"]').prop('name', 'optradio'+n);

  // adding after changing names.
  newdiv.insertAfter(lastdiv);

});

Answer 4

试试这个：

var clone = '';

  var count = 0;
  $('.addMore').on('click', function() {

    clone += '<div class="addMoreDiv">';
      clone += '<label>';
        clone += '<input type="radio" name="optradio'+count+'">Radio 1';
      clone += '</label>';
      clone += '<label>';
        clone += '<input type="radio" name="optradio'+count+'">Radio 2';
      clone += '</label>';
    clone += '</div>';

    $('.addMoreDiv').after(clone);

    count++;
  });

仍面临问题。请在下面评论。

动态添加div但输入类型无线电问题

4 个答案: