Zeigt eine Liste der Werte einer Auswahl von aktivierten Kästchen an - jquery, checkbox

Ich habe ein UL von Ankreuzfeldern in einem Abfragebaum. Ich möchte eine durch Kommas getrennte Liste der markierten Elemente unterhalb der gesamten Liste anzeigen (damit der Benutzer alle markierten Elemente visuell sehen kann). Wie würde ich das mit jquery machen? Ich bin mir sicher, wo ich anfangen soll. Hier ist mein 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>

Antworten:

Versuchen Sie den folgenden Code

DEMO

$("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());
});