追加并将当前选中的样式复选框值添加到div

Question

我正在尝试将当前选中的复选框值的值添加到div中，我使用以下js：

$(":checkbox").change(function() {
    var arr = $(":checkbox:checked").map(function() { return $(this).next().text();
}).get();

$("#testDiv").html(arr.join(',')); }

每当我点击它时会附加逗号分隔，但我想知道如何遍历每个值并为每个选定的值添加<span>和image，不知道如何在这里使用foreach，当我提醒我看到重复...任何建议或指示将非常感激。

第二个问题，我可以将相同的功能添加到＆＃39; onload＆＃39; ＆＃39; testDiv＆＃39;。我想在Div加载时保留这些选定的值（不能将它绑定到文档加载）。

HTML

<div class="cont">
    <input id="id" type="checkbox" value="100" name="abc">
    <label title="100" for="id">100</lable>
</div>
<div class="cont">
    <input id="id" type="checkbox" value="100" name="abc">
    <label title="200" for="id">200</lable>
</div>
<div class="cont">
    <input id="id" type="checkbox" value="100" name="abc">
    <label title="300" for="id">300</lable>
</div>
<div id="testDiv"></div>