Skip to content

Instantly share code, notes, and snippets.

@mmonteleone

mmonteleone/gist:1209097

Created September 11, 2011 02:40
Show Gist options
  • Save mmonteleone/1209097 to your computer and use it in GitHub Desktop.
Save mmonteleone/1209097 to your computer and use it in GitHub Desktop.
Download ZIP
Cloned Radio Input Checked State Test
Raw
gistfile1.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Radio Clone Test</title>
<script type="text/javascript">
/* Example of checked state of a radio input not being retained in a twice-cloned node.
Fails in Safari 4.0.5.
Passes in 5.1 */
window.onload = function() {
var div = document.createElement("div");
div.innerHTML = "<input type='radio' name='radiotest' checked='checked'/>";
var fragment = document.createDocumentFragment();
fragment.appendChild(div.firstChild);
var fragCloneClone = fragment.cloneNode(true).cloneNode(true).lastChild;
alert('Cloned check state retained (expected true): ' + fragCloneClone.checked);
document.getElementById('formtest').appendChild(fragCloneClone);
}
</script>
</head>
<body>
<form id="formtest"></form>
</body>
</html>
@mmonteleone
Copy link
Author

I follow your examples and agree with your analyses. This bug is different than the ones you linked, as it is not regarding a mistaken attempt to clone a node's properties, handlers, etc, but simply its attributes as populated by innerHTML.

The bug fix wasn't an advocation of the questionable practices of using cloneNode alongside innerHTML, but only as a fix for a blocking issue I had with jQuery 1.4, which simply provided no choice as it uses cloneNode internally within its innerHTML wrapper's node cache. Nor was it regarding jQuery's own clone function.

@GarrettS
Copy link

No, look closely at my example using defaultChecked; the "checked" attribute is indeed copied, resulting in defaultChecked == true. Also try:

var fragCloneClone = fragment.cloneNode(true).cloneNode(true);
alert('Cloned checked attribute value (expect true): ' + fragCloneClone.lastChild.getAttribute("checked"));

Results "checked".

So the cloning is working fine. The checkbox is cloned, the checked attribute is cloned.

The state of the object is being lost. That's not the same thing as the attribute being lost.

But why does that happen? Is that a bug? When I remove the element's name it retains the state; input.checked is true and it can be seen in the document that it is ticked off.

<script type="text/javascript">
window.onload = function() { 
    var div = document.createElement("div");
    div.innerHTML = "<input type='radio' id='radiotest' checked='checked'>";
    var fragment = document.createDocumentFragment();
    fragment.appendChild(div.firstChild);
    var fragCloneClone = fragment.cloneNode(true).cloneNode(true).lastChild;
    alert('Cloned check state retained (expected true): ' + fragCloneClone.checked);
    document.getElementById('formtest').appendChild(fragCloneClone);
}
</script>

alerts "true" and the radio looks checked. Also, this does not affect checkboxes; only radios.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment