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

Question

我创建了这个表单,允许你创建一个"东西"的多个实例......基本上,"东西"的必要字段都包含在一个部分中.当用户单击"添加更多"按钮时,我使用Jquery的克隆来复制系列中的最后一个部分元素,并在"添加更多"按钮之前插入它.我用一些Jquery清除了新部分中的任何字段.

我建立的这个表单的内容是,您可以在任何部分的字段中填写信息,但是当您决定不再需要特定部分时,您可以删除它.然后我有一个脚本将遍历其余部分,重新​​编号所有元素属性和元素,以便所有内容都适当编号(提交后更容易使用PHP处理表单),以及您输入的其余信息仍然会保留 - 即使元素和属性被重新编号后.

这是一支钢笔: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();
});

我遇到的问题是单选按钮.如果我点击一个单选按钮,在最后一节,然后单击"添加更多"后添加另一个部分,单选按钮空出(无选择),在被克隆的部分,而是被复制到新的节.试试笔...单击该部分中的一个单选按钮,然后单击"添加更多".你会明白我的意思.

我无法弄清楚我在这里做错了它是做到了这个......或者如果有什么我忘了或者过度了？

Answer 1

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

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

其次,您的原始无线电输入未经检查,因为在克隆它时,新元素与原始元素具有相同的名称和ID,并且您在克隆后更改它,这无济于事.

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

$('.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？编辑= 101

我还为单选按钮添加了值.