动态添加 div 但输入类型收音机出现问题

Question

我正在使用 <a>，单击它我正在克隆 div。在 div 中，我有两个同名的单选按钮。

现在的问题是当我 select 一个单选选项并克隆 div 接下来的两个单选按钮具有相同的名称并且 select 从最后一个 [=28] 编辑单选按钮=] 未selected.

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

<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 后更新了名称。

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

Answer 1

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

  })
})

<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 并找到输入并更改 attr name 这将使单选按钮在每个 div[=13 上彼此分开=]

Answer 2

找到下面的代码

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

试试这个：

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

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

Answer 4

根据@sailens 的建议；我们需要更改单选组的 name，以便将其视为一组全新的单选按钮。我们可以通过以下方式实现：

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

<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 但输入类型收音机出现问题

Adding div dynamically but issues with input type radio

html

css

jquery

radio