如何克隆jQuery中的默认选中状态的单选按钮？

Question

我很难克隆单选按钮及其默认的检查状态。

这里是我的HTML：

<div class="container"> 
<div class="a2"> 
    <input type="radio" name="selection_1" value="name" checked="checked" /> Name 
    <input type="radio" name="selection_1" value="url" /> URL 
    <div class="text"> 
     <textarea name="name[]">Enter name: </textarea> 
    </div> 
    <div class="url"> 
     <textarea name="url[]">http://</textarea> 
    </div> 
    </div> 
</div> 
<input type="button" class="clone" value="Clone" /> 

这是我的jQuery：

$('.a2 [name]').change(function() { 
if($(this).val() == "name") { 
    $(this).parent().find('.url').css({'visibility': 'hidden', 'display':'none'}); 
    $(this).parent().find('.text').css({'visibility': 'visible', 'display':'block'}); 
} else { 
    $(this).parent().find('.text').css({'visibility': 'hidden', 'display':'none'}); 
    $(this).parent().find('.url').css({'visibility': 'visible', 'display':'block'}); 
} 
}); 

$('.clone').click(function() { 
    var p = $('.a2:first').length; 
    var cloned = $('.a2:first').clone() 
    .find('.a2 [name]').attr('name', 'selection_' + ++p).end() 
    .appendTo('.container'); 
}); 

我想实现的是克隆按钮应该克隆单选按钮，整组和文本区域默认的检查状态也被克隆到新的集合中。单选按钮应该通过在每个副本上增加前缀编号（如s​​election_2，selection_3等）来重命名，以便每个集合上的无线电选择独立工作。

这里是小提琴：http://jsfiddle.net/Tz66H/

Answer 1

试试这个：

$(".container").on("change", ".a2 input[name^='selection_']", function (event) { 
    if ($(this).val() == "name") { 
     $(this).parent().find('.url').css({ 
      'visibility': 'hidden', 
       'display': 'none' 
     }); 
     $(this).parent().find('.text').css({ 
      'visibility': 'visible', 
       'display': 'block' 
     }); 
    } else { 
     $(this).parent().find('.text').css({ 
      'visibility': 'hidden', 
       'display': 'none' 
     }); 
     $(this).parent().find('.url').css({ 
      'visibility': 'visible', 
       'display': 'block' 
     }); 
    } 
}); 

$('.clone').click(function() { 
    var p = $('.a2').length; 
    var cloned = $('.a2:first').clone() 
     .find('input:radio').attr('name', 'selection_' + ++p).end() 
     .appendTo('.container'); 
}); 

DEMO

Answer 2

尝试

var p = $('.a2 input[name=^="selection_"]').length + 1; 
var cloned = $('.a2:first').clone() 
.find('.a2 [name]').attr('name', 'selection_' + p).end() 
.appendTo('.container'); 

测试的代码

<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript"> 

    $(function() 
    { 
     $('.a2 [name]').change(function() 
     { 
      if($(this).val() == "name") 
      { 
       $(this).parent().find('.url').css({'visibility': 'hidden', 'display':'none'}); 
       $(this).parent().find('.text').css({'visibility': 'visible', 'display':'block'}); 
      } 
      else 
      { 
       $(this).parent().find('.text').css({'visibility': 'hidden', 'display':'none'}); 
       $(this).parent().find('.url').css({'visibility': 'visible', 'display':'block'}); 
      } 
     }); 

     $('.clone').click(function() 
     { 
      var p = $('.a2 input[name^="selection_"]').length + 1; 
      alert(p); 
      var cloned = $('.a2:first').clone().find('input[name^="selection_"]').attr('name', 'selection_' + p).end().appendTo('.container'); 
     }); 
    }); 

</script> 
<div class="container"> 
    <div class="a2"> 
     <input type="radio" name="selection_1" value="name" checked="checked" /> Name 
     <input type="radio" name="selection_1" value="url" /> URL 
     <div class="text"> 
      <textarea name="name[]">Enter name: </textarea> 
     </div> 
     <div class="url"> 
      <textarea name="url[]">http://</textarea> 
     </div> 
    </div> 
</div> 
<input type="button" class="clone" value="Clone" /> 

Answer 3

试试这个

$('.clone').click(function() { 
    var p = $('.a2 input[value="name"]').length + 1; 
    $('.a2:first').clone().find('input[value="name"]').attr({name:'selection_' + p}).end().appendTo('.container'); 
}); 

fiddle here