CODEWITHSUNDEEP
javascriptjquerydomclone
Dunnomuch
Dunnomuch

Reputation: 223

jQuery's clone() function messes up original element's property

I have this seemingly simple problem. I first check a radio button, then clone it. The original radio button becomes unchecked, and the cloned one is correct. Can anyone tell me why the original radio button becomes unchecked?

Thanks in advance!

<!DOCTYPE HTML>
<html>
<head>
    <script src="jquery.js"></script>
</head>
<body>
    <div id="ClonedDiv" style="display:none"></div>
    <div id="RadioDiv">
        <input id="high"   type="radio" name="severity" value="High"/>
        <input id="medium" type="radio" name="severity" value="Medium"/>
        <input id="low"    type="radio" name="severity" value="Low"/>
    </div>
    <script>
            $("#RadioDiv #high").prop("checked", true);
            alert("RadioDiv's High is: " + ($("#RadioDiv #high")[0].checked ? "CHECKED." : "NOT CHECKED!") );
            $("#ClonedDiv").empty();
            $("#RadioDiv>input").clone().appendTo("#ClonedDiv"); // I'm merely cloning RadioDiv's inputs into ClonedDiv...
            alert("RadioDiv's High is: " + ($("#RadioDiv #high")[0].checked ? "CHECKED." : "NOT CHECKED!") );
            alert("ClonedDiv's High is: " + ($("#ClonedDiv #high")[0].checked ? "CHECKED." : "NOT CHECKED!") );
    </script>
</body>
</html>

Upvotes: 1

Views: 815

Answers (1)

crad
crad

Reputation: 433

Only one radio button in a group can be checked. Checking one un-checks all others. A grouping of radio buttons is determined by them all having the same name attribute. Cloning them into the hidden div and then checking one un-checks the other.

Upvotes: 4

Related Questions