Question

我已经创建了这个表单，允许您创建一个＆＃34;事物的多个实例; ...基本上是＆＃34;事物的必要字段＆＃34;都包含在一个部分内。当用户点击＆＃34;添加更多＆＃34;按钮，我使用Jquery的克隆来复制系列中的最后一个部分元素，并在＆＃34之前插入它;添加更多＆＃34;按钮。我用一些Jquery清除了新部分中的任何字段。

我已经建立的这个表单的内容是，您可以在任何部分的字段中填写信息，但是当您决定不再需要特定部分时，您可以删除它。然后我有一个脚本将通过剩下的部分，重新编号所有元素属性和元素，以便所有内容都适当编号（提交后更容易用PHP处理表单），以及你剩下的信息＆＃ 39;即使元素和属性被重新编号后，仍然会保留输入。

这是笔：http://codepen.io/JonnyNineToes/pen/AgEax

强制性代码：

// when the user clicks the "add more" button...
$('.add_btn').click(function(){
  // clone the previous element (a "repeatable" element), and insert it before the "add more" button
  $(this).prev('.repeatable').clone().insertBefore(this).html();
  // get the number of repeatable elements on the page
  var num = $('.repeatable').length;
  // again, get the previous element (a "repeatable" element), and change the header to reflect it's new index
  $(this).prev('.repeatable').children('h2').html('Person ' + num);
  // now, go through all text boxes within the last "repeatable" element...
  $('.repeatable').last().find('input').each(function(){
    // ...change their "structure" data attributes to reflect the index+1 value of the "repeatable" element
    dattr = $(this).data('structure') + num;
    $(this).attr({
      'id':dattr,
      'name':dattr
    // update the "for" attribute on the parent element (label)
    }).parent('label').attr('for',dattr);
    // clear the input field contents of the new "repeatable"
    // if the type of the input is "radio"...
    if ($(this).attr('type') == 'radio') {
      // remove the checked attribute
      /*$(this).removeAttr('checked');*/
    // for all other inputs...
    } else {
      // clear the value...
      $(this).val('');
    }
  });
  // run the "destroy" method... I forget why... just do it, and don't gimme no lip.
  destroy();
  updateRemoveLinks();
});

我遇到的问题是使用单选按钮。如果我单击上一部分中的一个单选按钮，然后单击＆＃34;添加更多＆＃34;要在其后添加另一个部分，单选按钮会在克隆的部分中清空（无选中），而是复制到新部分。试试笔...单击该部分中的一个单选按钮，然后单击＆＃34;添加更多＆＃34;。你会明白我的意思。

我无法弄清楚我在这里做错了什么呢？或者是否有我忘记或过度看待的东西？

Answer 1

首先，要取消选中新的无线电输入，您应该使用

$(this).prop("checked",false);

其次，您的原始广播输入未经检查，因为在克隆它时，新元素与原始元素具有相同的名称和ID，并且您在克隆后更改它，这对您没有帮助。< / p>

避免这种情况的一种方法是简单地保存原始广播并在克隆和名称更改完成后重置它，如下所示：

$('.add_btn').click(function(){
    // clone the previous element (a "repeatable" element), and insert it before the "add more" button

    // save the original checked radio button
    var original = $('.repeatable').last().find(':checked');
    $(this).prev('.repeatable').clone().insertBefore(this).html();
    // get the number of repeatable elements on the page
    var num = $('.repeatable').length;
    // again, get the previous element (a "repeatable" element), and change the header to reflect it's new index
    $(this).prev('.repeatable').children('h2').html('Person ' + num);
    // now, go through all text boxes within the last "repeatable" element...
    $('.repeatable').last().find('input').each(function(){
      // ...change their "structure" data attributes to reflect the index+1 value of the "repeatable" element
      dattr = $(this).data('structure') + num;
      $(this).attr({
        'id':dattr,
        'name':dattr
      // update the "for" attribute on the parent element (label)
      }).parent('label').attr('for',dattr);
      // clear the input field contents of the new "repeatable"
      // if the type of the input is "radio"...
      if ($(this).attr('type') == 'radio') {
        // remove the checked attribute
        $(this).prop('checked',false);
      // for all other inputs...
      } else {
        // clear the value...
        $(this).val('');
      }
      // check if there's a checked radio button, and restore it
      if (original.length == 1) {
          original.prop('checked',true);
      }
    });

工作示例： http://codepen.io/anon/pen/ByKEYJ?editors=101

我还在单选按钮上添加了值。

Answer 2

我知道，这是一篇过时的文章，但是今天我遇到了同样的问题，而且看起来Jquery不再找到仅带有'：checked'元素了。

我将其更改为：

var original = $('.whatever').last().find('input:checked');

它现在可以工作。

Jquery克隆元素：保留选中的单选按钮的问题

2 个答案: