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" />');
});

将html添加到从已选中复选框中提取的值列表中

2 个答案: