Jquery clone() on multiple elements

Question

I have a problem with cloning multiple elements using Jquery clone().

I have HTML:

<div id="is_watermark">
    <input class="is_watermark" type="checkbox" name="is_watermark" value="1" checked />
    <span>Add watermark</span></div>
<div id="minify_image">
    <p>By default image is 400px. You can change size:</p>
    <input class="minify-radio" type="radio" name="minify" value="200"  /><span>200px</span>
    <input class="minify-radio" type="radio" name="minify" value="400" checked="checked"/><span>400px</span>
    <input class="minify-radio" type="radio" name="minify" value="600" /><span>600px</span>
    <input class="minify-radio" type="radio" name="minify" value="800"/><span>800px</span>
</div>

Then I use ajaxFileUpload which basically creates new form and sends image through ajax:

I have in my Javascripts the following:

var oldInputElements = $('.minify-radio, .is_watermark');
var newInputElements = $(oldInputElements).clone(true);
console.log(oldInputElements);
console.log(newInputElements);

In Firebug I see that oldInputElements is fine and represents what I had in HTML, but the newly created newInputElements contains all elements but with only one general value coming from radio elements. For example, if at the moment the radio was chosen with value 600, then in the newly created variable newInputElements all five input elements (including checkbox!) would have value 600.

Is it a bug, or I simply missing something?

Answer 1

$("input:radio").change( function() {
   $("input:radio").removeAttr("checked");
   $(this).prop("checked", true);
});

You can use this code. Removing checked property/attribute and then adding the attribute to current selected item/node.

Fiddle