添加HTML從選中的複選框

Question

這裏拉值的列表是我的HTML：

<ul> 
    <li> 
     <input type="checkbox" id="data_patient-name" value="Patient Name" class="checkbox"> 
     <label for="data_patient-name">Patient Name</label> 
    </li> 
    <li> 
     <input type="checkbox" id="data_wait-time" value="Wait Time" class="checkbox"> 
     <label for="data_wait-time">Wait Time</label> 
    </li> 
    <li> 
     <input type="checkbox" id="data_patient-satisfaction" value="Patient Satisfaction" class="checkbox"> 
     <label for="data_patient-satisfaction">Patient Satisfaction</label> 
    </li> 
</ul> 

這裏是我的JavaScript：

$(".checkbox").on("change", function(){ 
    var reportFields = []; 
    $('.checkbox:checked').each(function(){   
     var fieldValues = $(this).next().text(); 
     reportFields.push(fieldValues); 
    }); 
    $("ul.report-fields").html(reportFields.join(", ")); 
}); 

所以這給了我一個逗號分隔值列表從檢查複選框，真棒！但是，我需要在該列表中包含更多信息。也就是說，每個值都需要是一個具有與複選框的ID相對應的類名的列表項。所以，最後，我需要看起來像這樣的列表：

<ul class="report-fields"> 
    <li class="data_patient-name">Patient Name<sup><a href="#" class="remove" title="Remove">x</a></sup></li> 
    <li class="data_wait-time">Wait Time<sup><a href="#" class="remove" title="Remove">x</a></sup></li> 
    <li class="data_patient-satisfaction">Patient Satisfaction<sup><a href="#" class="remove" title="Remove">x</a></sup></li> 
</ul> 

所以我一直在玩弄我的JS行：

$(".buildReportBox .report-fields ul").html(reportFields.join(", ")); 

，但我有一個很多麻煩。

Answer 1

嘗試

$(".checkbox").on("change", function() { 
    var reportFields = $('.checkbox:checked').map(function() { 
     var $this = $(this); 
     return '<li class="' + this.id + '">' + $this.next().text() + '<sup><a href="#" class="remove" title="Remove">x</a></sup></li>' 
    }).get(); 
    $("ul.report-fields").html(reportFields.join('')); 
}); 

演示：Fiddle

Answer 2

可以使用wrap功能，可以這樣做：

$("ul.report-fields").html(reportFields.join(" ")).each(function(){ 
    $(this).wrap('<a class="yourclass" href="#path" />'); 
});