How to clone radio buttons in jQuery with default checked status?
<p>I am having difficulty cloning radio buttons with their default checked status. </p>

<p>Here is my HTML:</p>

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

<p>This is my jQuery:</p>

<pre><code>$('.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');
});
</code></pre>

<p>What I am trying to achieve is the Clone button should clone the entire set of radio buttons and the text areas with the default checked status also cloned in the new set. The radio buttons should be renamed by increasing the prefix number such as selection_2, selection_3, etc on each copy so that the radio selection on each set work independently.</p>

<p>Here is the fiddle: <a href="http://jsfiddle.net/Tz66H/" rel="nofollow">http://jsfiddle.net/Tz66H/</a></p>
