Javascript 如何在使用jquery更改复选框时克隆类似元素？

我现在有很多项目，每个项目都有一个数据列表。我试图实现的是，当我选中一个具有相同匹配属性

itemName

的复选框时，包含附加数据的匹配div将被附加到一个容器中。我在这里写了一些代码：

<div class="item" itemName="itemOne">
    <h2> Item One </h2>
    <ul>
        <li> Data 1 </li>
        <li> Data 2 </li>
        <li> Data 3 </li>
    </ul>
</div>
<div class="item" itemName="itemTwo">
    <h2> Item Two </h2>
    <ul>
        <li> Data 1 </li>
        <li> Data 2 </li>
        <li> Data 3 </li>
    </ul>
</div>
<ul class="itemSelection">
    <li itemName="itemOne">
        <label><input type="checkbox"/>Item One</label>
    </li>
    <li itemName="itemTwo">
        <label><input type="checkbox"/>Item Two</label>
    </li>
</ul>
<div id="container"></div>

项目一

数据1
数据2
数据3

项目二

数据1
数据2
数据3



项目一


项目二

---

非常感谢您的帮助。

您需要检查复选框的状态。如果选中了复选框

，则使用该复选框将目标元素添加到

#容器中

，如果未选中该复选框，则使用该复选框将其删除

$（“.itemSelection:checkbox”）.change（函数（）{
var itemName=$（this）.closest（“li”）.attr（“itemName”）；
如果（选中此项）
$（“.item[itemName=“+itemName+”]）.clone（）.appendTo（“#容器”）；
其他的
$（“#container.item[itemName=“+itemName+”]）。删除（）；
});

项目一

数据1
数据2
数据3

项目二

数据1
数据2
数据3



项目一


项目二


您尝试过什么？将复选框属性值存储为变量，如果它与div的属性值匹配，则添加div。目前运气不太好。请将您尝试过的代码添加到问题Mohammad，非常感谢您简洁明了的代码。非常感谢，这正是我来这里的目的。非常感谢。为什么我的帖子被否决了？我不完全确定一个合法的问题到底出了什么问题。@威震天我没有否决你的帖子，但可能是因为你没有尝试任何代码，只发布了一个问题。感谢穆罕默德的回复。糟糕的是，我来这里是因为我不知道怎么做，也不知道从哪里开始。我以为这是一个寻求帮助的论坛。下次我会说我不完全确定从哪里开始。无论如何，我感谢你的工作回答：）