Q:

Copying an element's html content using Jquery to another element, not working for checkbox status (checked, unchecked) ?

This is my simple html page : 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="jquery.min.js"></script>
    <script >
      function copy(){
         $("#two").html($("#one").html());
      }
    </script>
</head>
<body>

<button onclick="copy()">copy</button>

<div id="one">
<input type="checkbox" name="test" >
</div>

<div id="two">
</div>

</body>
</html>

when I click the button, contents of div#one is copied to div#two, but when I first click on checkbox (It is checked now!) and then click the Button, The second checkbox is produced, but it is not checked!! why?

A:

Using .html() only copies the plain HTML code of the target element, not other data like whether or not boxes are checked. If you want to include such data, use .clone() instead.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="jquery.min.js"></script>
    <script >
      function copy(){
         $("#two").html($("#one").clone());
      }
    </script>
</head>
<body>

<button onclick="copy()">copy</button>

<div id="one">
<input type="checkbox" name="test" >
</div>

<div id="two">
</div>


</body>
</html>

This will work for any number of checkboxes, as well as data for other elements such as a textbox's value.

