チェックボックスの選択値のリストを表示する - jquery、checkbox

jqueryツリーにチェックボックスのULがあります。 （ユーザーがチェックオフしたすべてのアイテムを視覚的に確認する方法として）リスト全体の下にチェックオフされているもののコンマ区切りのリストを表示したいと思います。 jqueryでこれを行うにはどうすればよいですか？どこから始めればよいか私は確信しています。これが私のHTMLです：

<ul>
<li><span>
<input type="checkbox" value="Item 1" id="Item1"/>
<label>Item 1</label>
</span>
<ul>
<li><span>
<input type="checkbox" value="Item 1.0" id="Item1-0"/>
<label>Item 1.0</label>
</span>
<ul>
<li><span>
<input type="checkbox" value="Item 1.0.0" id="Item1-0-0"/>
<label>Item 1.0</label>
</span></li>
</ul>
</li>
<li><span>
<input type="checkbox" value="Item 1.1" id="Item1-1"/>
<label>Item 1.1</label>
</span></li>
<li><span>
<input type="checkbox" value="Item 1.2" id="Item1-2"/>
<label>Item 1.2</label>
</span>
<ul>
<li><span>
<input type="checkbox" value="Item 1.2.0" id="Item1-2-0"/>
<label>Item 1.2.0</label>
</span> </li>
</ul>
</li>
</ul>
</li>
<ul>
<div class="currently-selected">
Currently Selected:
<span>Item 1</span>,<span>Item 2</span>
</div>

回答：

次のコードを試してください

デモ

$("input[type=checkbox]").on("change", function(){
$(".currently-selected").html("Currently Selected:");
var arrTemp = [];

$("input[type=checkbox]:checked").each(function(ind, val){
arrTemp.push("<span>" + $(val).val() + "</span>");
});

$(".currently-selected").append(arrTemp.join());
});